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

Set listener for store events in a controller

提问by Demnogonis

I have a controller with a store, a model, and some views.

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

I need to listen for the beforesyncand writeevent of the store in the controller, but I don't know how to set these listeners in the controllers control-function.

我需要在控制器中监听商店的beforesync和write事件，但我不知道如何在控制器control功能中设置这些监听器。

My store looks like this :

我的商店看起来像这样：

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'
        }
    }
});

Now I try to listen to the events in my controller :

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

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

My expected result is that the functions will be executed, when the events are fired. But at this time nothing happens when they are fired.

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

How can I get this to work?

我怎样才能让它发挥作用？

回答by Molecular Man

Your wayis possible but it's not ideal, IMO. The better way is to use controllers's store getter. In your case the code would be something like this:

你的方式是可能的，但它并不理想，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
    });
},

回答by James McMahon

Here is an alternative syntax to Molecular Man's answer.

这是Molecular Man's answer的另一种语法。

Instead of writing,

而不是写作，

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

You can write

你可以写

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

I think this alternative definition reads a little bit better.

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

I took this from an answer Izhakigave me.

我从Izhaki给我的回答中得到了这个。

回答by gambetti

As for Extjs 4.2.1, your initial way of accessing the store listener would actually work, if you were using the 'storeId' instead of the id and the 'listen' function instead of 'control':

至于 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,
               ...

回答by nscrob

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

App - your application object The function onBeforeSync you can implement it in the controller ... this is the only way i could assign the event to the store and still implement the logic in the controll. I hope it helps

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

回答by Demnogonis

I solved it by myself.

我自己解决了。

I added the listener manually in the render-event of my Panel

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

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

Thank you for the help @nscrob.

感谢您的帮助@nscrob。

回答by Galileo_Galilei

Hope this addition will help someone out there to avoid spending some hours on debugging the library core:

希望这个添加将帮助那里的人避免花费一些时间来调试库核心：

Related to this practice of accessing Ext.data.Store instance inside Controller using the controller's getter method: e.g. for the "DT.store.UsersStore" above using this.getUsersStoreStore():

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

pay attention that if the store is already associated in a view(e.g. was declared as the store property for a "UsersGrid" Grid.panel.Panel widget definition) then this getter method will retrieve in fact another instance of the same Store class and not the instance used by the widget!The reason is that adding the store in the constructor configuration object like this:

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

stores: ['UsersStore']

will in fact add a new store instance in Ext.data.StoreManager.map hash so - supposing that 'UsersStore' is the only Store object instantiated so far - the map keys now look like:

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

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

Now imagine you want to read some new data using your store'proxy and display this new data in the "UsersGrid" and you want to do all these when user clicks on something, so inside controller you will have a handler method for the user event with the code:

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

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

That call to get the reference will be translated internally in this.getStore('UsersStore') and will return a reference to the controller generated - 1: "UsersStore" - and not - 2: "myStore" - as one might expected. Furthermore, the load() call will load the UsersStore instance with the new Models and this will not be reflected in your grid view(because the grid is bound and listens to the events generated by "myStore" store instance).

获取引用的调用将在 this.getStore('UsersStore') 中进行内部转换，并将返回对生成的控制器的引用 - 1: "UsersStore" - 而不是 - 2: "myStore" - 正如人们所期望的那样。此外， load() 调用将使用新模型加载 UsersStore 实例，这不会反映在您的网格视图中（因为网格已绑定并侦听“myStore”存储实例生成的事件）。

So better access the store by its itemId using the general getStore method: this.getStore('storeItemId')

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

回答by Andrei Neculau

Why not just relay the store's events? For example:

为什么不直接转播商店的事件？例如：

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

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

And then be able to

然后就可以

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

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