Ext JS 6 Duplicate Entity Name Error

When I reopened Account Profile tab after closing it, I got following error (shown in browser’s console)

Duplicate entity name “AccountProfileModelList”: AccountProfileModelList and AccountProfileModelList(…)

In this page, I defined a Model named AccountProfileModelList

Ext.define('AccountProfileModelList', {
    extend : 'Ext.data.Model',
    idProperty : 'id',
    fields : [ {
        name : 'id',
        type : 'int'
    }, 'pasm', 'amount', 'type', 'profit', 'rate_type', 'bill_number', 'transactionNumber',
        'userRealName', 'agentRealName',
        {
            name : 'payDate',
            type : 'date',
            dateFormat : 'Y-m-d H:i:s'
        }]
});

When opening the Account Profile tab first time, the AccountProfileModelList will be defined. And when opening the tab second time, the AccountProfileModelList will be defined again. This is why the error appeared.

What’s interesting is that In Ext 5 above scenario won’t cause any error, but in Ext 6, a model cannot be defined twice anymore.

To fix this issue, we need use

typeof(AccountProfileModelList) == 'undefined'

So the above code should be changed to

if(typeof(AccountProfileModelList) == 'undefined'){
    Ext.define('AccountProfileModelList', {
        extend : 'Ext.data.Model',
        idProperty : 'id',
        fields : [ {
            name : 'id',
            type : 'int'
        }, 'pasm', 'amount', 'type', 'profit', 'rate_type', 'bill_number', 'transactionNumber',
            'userRealName', 'agentRealName',
            {
                name : 'payDate',
                type : 'date',
                dateFormat : 'Y-m-d H:i:s'
            }]
    });
}

A more Ext way to detect whether a Ext class is already defined is using

Ext.ClassManager.isCreated(className)

Above code can also be changed to

if(!Ext.ClassManager.isCreated(AccountProfileModelList)){
    Ext.define('AccountProfileModelList', {
        extend : 'Ext.data.Model',
        ...
    });
}

The post Ext JS 6 Duplicate Entity Name Error appeared first on Redino blog.