未调用 ExtJS 存储加载监听器

Question

我有一个自定义数据存储，它存储存储是否已加载一次的信息。

/**
 * Custom DataStore which stores the information whether data has been loaded once or not.
 */
Ext.example.Store = Ext.extend(Ext.data.Store, {
    loaded: false,
    initComponent: function() {
        this.superclass().initComponent.call(this);
        this.addEvents('load','beforeload');
    },
    isLoaded : function() {
        return this.loaded;
    },
    listeners: {
        'load' :  function(store,records,options) {
            this.loaded = true;
        }
    }
});

这一直很好，直到最近我向这个商店的一个实例添加了一个“beforeload”事件监听器。现在不会调用“加载”监听器。

var accountsDataStore = new Ext.example.Store({

    id : 'account',
    proxy : new Ext.data.HttpProxy({
        url : 'app/account/fetch/all',
        method : 'post',
        api : {
            destroy : 'app/account/delete'
        }
    }),
    reader : accountReader,
    writer : accountWriter,
    remoteSort : true,
    sortInfo : {
        field : 'createdOn',
        direction : "DESC"
    },
    listeners: {
        beforeload: function(store, options) {
            var sort = options.params.sort;
            // setting the sort parameters to match the property names in the DTO
            switch(sort) {
                case 'company' :
                    options.params.sort = 'company.name';
                    break;
                default:
                    // do nothing
            }
        }
    }

});

我在这里做错了什么？也请让我知道您的改进建议

Answer 1

问题是你永远不应该在原型(prototype)上设置对象，除非你真的知道它的含义(它将被所有实例共享并且可以在每个实例的基础上被覆盖)

在 Ext JS 中，我只在原型(prototype)上设置了配置选项，这些选项只是为了方便，可能会被调用者覆盖。

您的头等舱Ext.example.Store将听众放在其原型(prototype)上。
然后，您通过将监听器对象传递到配置中来在 accountsDataStore 中覆盖它。

要解决您的问题，无需在原型(prototype)上设置监听器，只需调用 this.on('event')从构造函数。

/**
 * Custom DataStore which stores the information whether data has been loaded once or not.
 */

Ext.example.Store = Ext.extend(Ext.data.Store, {
    loaded: false,
    constructor: function() {
        this.superclass().constructor.call(this);
        // No need to call this, you're not adding any events
        // this.addEvents('load','beforeload');
        this.on('load', function(store,records,options) {
            this.loaded = true;
        }, this);
    },
    isLoaded : function() {
        return this.loaded;
    }
});