为控制器中的商店事件设置监听器

Question

我有一个带有商店、模型和一些视图的控制器。

我需要在控制器中监听store的beforesync和write事件，但是不知道如何在控制器control-function中设置这些监听器。

我的店铺是这样的：

Ext.define('DT.store.UsersStore', {
    extend : 'Ext.data.Store',
    model : 'DT.model.User',
    id : 'myStore'
    autoSync : true,
    proxy : {
        type : 'ajax',
        api : {
            read : '/load_entries',
            update : '/update_entry'
        },
        reader : {
            type : 'json',
            root : 'user',
            successProperty : 'success'
        }
    }
});

现在我尝试监听控制器中的事件：

...
init : function () {
    this.control({
        'myStore' : {
            beforesync : this.doSomething,
            write : this.doSomethingElse
        }
    });
},
...

我的预期结果是，当事件被触发时，函数将被执行。 但是此时他们被解雇时什么都没有发生。

我怎样才能让它工作？

Answer 1

Your way 是可能的，但它并不理想，IMO。更好的方法是使用控制器的 store getter。在您的情况下，代码将是这样的：

init : function () {
    // every controller has getters for its stores.
    // For store UsersStore getter would be getUsersStoreStore()
    this.getUsersStoreStore().addListener('write',this.finishedLoading, this);
    this.control({
        // widgets event handlers
    });
},

Answer 2

这是Molecular Man's answer 的替代语法。

而不是写作，

init : function () {
    this.getUsersStoreStore().addListener('write',this.finishedLoading, this);
    this.control({
        // widgets event handlers
    });
},

你可以写

init : function () {
    this.getUsersStoreStore().on({
        write: this.finishedLoading,
        scope: this
    });
    this.control({
        // widgets event handlers
    });
},

我认为这个替代定义读起来更好一些。

这是我从answer Izhaki 给我的。

Answer 3

对于 Extjs 4.2.1，如果您使用 'storeId' 而不是 id 和 'listen' 函数而不是 'control'，那么您访问商店侦听器的初始方式实际上会起作用：

Ext.define('DT.store.UsersStore', {
    extend : 'Ext.data.Store',
    model : 'DT.model.User',
    storeId : 'myStore'
    ....

init : function () {
    this.listen({
        store: {
           '#myStore' : {
               beforesync : this.doSomething,
               ...

Answer 4

Ext.define('Store', {
    model: 'Model',
    extend: 'Ext.data.Store',
    listeners: {
        'beforesync': function(){
            App.getController('somecontroller').onBeforeSync();
        }
    }
});

App - 你的应用程序对象 您可以在控制器中实现 onBeforeSync 功能......这是我可以将事件分配给商店并仍然在控制器中实现逻辑的唯一方法。希望对你有帮助

Answer 5

我自己解决了。

我在面板的render-event 中手动添加了监听器

Ext.getCmp('userPanel').down('gridpanel').getStore().addListener('write',this.finishedLoading, this);

感谢@nscrob 的帮助。

Answer 6

希望这个添加可以帮助人们避免花费一些时间来调试库核心：

与使用控制器的 getter 方法访问控制器内部的 Ext.data.Store 实例的这种做法有关：例如对于上面的“DT.store.UsersStore”，使用 this.getUsersStoreStore()：

注意，如果商店已经在视图中关联（例如，被声明为“UsersGrid”Grid.panel.Panel 小部件定义的商店属性），那么这个 getter 方法实际上将检索另一个实例相同的 Store 类，而不是小部件使用的实例！ 原因是在构造函数配置对象中添加存储是这样的：

stores: ['UsersStore']

实际上将在 Ext.data.StoreManager.map 哈希中添加一个新的商店实例 - 假设 'UsersStore' 是迄今为止唯一实例化的商店对象 - 地图键现在看起来像：

0: "ext-empty-store"
1: "UsersStore"
2: "myStore"

现在假设您想使用您的 store'proxy 读取一些新数据并在“UsersGrid”中显示这些新数据，并且您希望在用户单击某物时执行所有这些操作，因此在控制器内部您将有一个处理程序方法带有代码的用户事件：

'user-selector' : {
    click: function(){
                     var oStoreReference = this.getUsersStoreStore();
                         oStoreReference.load( {params:{} });
            }
    }

获取引用的调用将在 this.getStore('UsersStore') 内部翻译，并将返回对生成的控制器的引用 - 1：“UsersStore” - 而不是 - 2：“myStore” - 可能预期的。此外，load() 调用将使用新模型加载 UsersStore 实例，这不会反映在您的网格视图中（因为网格已绑定并监听“myStore”存储实例生成的事件）。

所以最好使用通用 getStore 方法通过 itemId 访问商店：this.getStore('storeItemId')

Answer 7

为什么不直接转播商店的活动？例如：

this.getUsersGrid().relayEvents(this.getUsersStoreStore(), ['write'], 'store')

然后就可以了

this.control('somegrid-selector': {storeWrite: function(){...}})

Answer 8

以防万一有人为此绊倒。

ExtJS 7.3

Ext.define('DT.controller.UsersStore', {
    extend: 'Ext.app.Controller',

    listen: {
        store: {
            UsersStore: {
                beforesync : 'doSomething',
                write : 'doSomethingElse'
            }
        }
    },

    doSomething() {
        console.log(arguments)
    },

    doSomethingElse() {
        console.log(arguments)
    }
});