在控制器中设置存储事件的侦听器

Question

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

我需要在控制器中监听 store 的 beforesync 和 write 事件，但我不知道如何在控制器 control< 中设置这些监听器/代码>-函数。

我的商店看起来像这样：

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

你的方式是可能的，但它是不理想，海事组织。更好的方法是使用控制器的存储 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

这是分子人的答案的替代语法。

而不是写

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

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

。我从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 事件中手动添加了侦听器，

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

谢谢您的帮助@nscrob。

Answer 6

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

与使用控制器的 getter 方法访问 Controller 内的 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"

现在假设您想使用商店代理读取一些新数据并在“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)
    }
});