未调用 ExtJS 存储加载侦听器答案

【问题标题】：ExtJS Store load listener not being invoked未调用 ExtJS 存储加载侦听器
【发布时间】：2011-08-17 12:16:40
【问题描述】：

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

/**
 * 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”事件侦听器，这一切都很好。 'load' 监听器现在不会被调用。

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
            }
        }
    }

});

我在这里做错了什么？也请告诉我您的改进建议

【问题讨论】：

你在哪里加载商店？我看不到任何 autoLoad : true 或 accountsDataStore.load() 选项。
我尝试通过点击标签来加载商店。如果之前已加载商店，我的意图是不加载商店-if(!accountsDataStore.isLoaded()) { accountsDataStore.load(); }。 isLoaded 总是返回 false，因为从不调用负载监听器。
嗨，我也面临同样的问题。你能说说你是怎么解决这个问题的吗？

标签： extjs

【解决方案1】：

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

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

您的第一堂课Ext.example.Store 将听众放在其原型上。然后通过将 listeners 对象传递到配置中，在 accountsDataStore 中覆盖它。

要解决您的问题，无需在原型上设置侦听器，只需从构造函数中调用 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;
    }
});

【讨论】：

【解决方案2】：

“beforeload”事件的文档说明：

"在请求新数据对象之前触发。如果 beforeload 处理程序返回 false 加载操作将被取消。”

您可以尝试从 beforeload 侦听器返回 true 以确保加载操作仍然运行。

【讨论】：

【解决方案3】：

store.totalCount

如果加载，此属性返回一个数字别的此属性未定义 (extjs-4.1.0-rc1)

【讨论】：

【解决方案4】：

好的，我认为范围有问题。请尝试这种方式：

listeners: {
        'load' :  {
            fn : function(store,records,options) {
                 console.log(this, this.loaded);
                 this.loaded = true;
            },
            scope : this
        }
    }

或者你可以使用：

listeners: {
        'load' :  function(store,records,options) {
            store.loaded = true;
        }
    }

【讨论】：

事实上负载监听器甚至没有被调用。
更改这一行：this.superclass().initComponent.call(this);到 Ext.example.Store.superclass.initComponent.call(this);并且不要添加加载事件，因为商店加载事件已经存在。
不幸的是，这似乎不是问题
当我取下beforeload监听器时，控件进入load监听器。