为控制器中的商店事件设置侦听器时出现异常

Question

我的问题与此处所述的几乎相同：Set listener for store events in a controller，但我尝试了所有不同的解决方案，但都没有奏效。我最喜欢的解决方案是这个：

Ext.define('Photoalbum.view.Table', {
extend : 'Ext.dataview.DataView',
xtype  : 'photoalbum-table',

config : {
    width: 3000, 
    height: 3000,
    itemTpl: new Ext.XTemplate(
        '<tpl for=".">',
        '<div class="x-panel x-floating" style="width: {width+12}px !important; height: {height+12}px !important; top: {top}px !important; left: {left}px !important;">',
        '   <img src="{url}">',
        '</div></tpl>'
    )
},

constructor : function(config) {
    Ext.apply(config, {
        store : Ext.create('Photoalbum.store.Images')   //I don't like using storeId (or any other id) so I create the store class
    });

    this.callParent([config]);
    this.getStore().on('load', Photoalbum.getController('App').handleImagesLoad, this);
    this.getStore().load();
}
});

我得到以下异常：

Uncaught TypeError: Object #<Object> has no method 'getController'
Ext.define.constructorTable.js:23
Ext.apply.create.fsencha-touch-all.js:15
(anonymous function)
Ext.ClassManager.instantiatesencha-touch-all.js:15
Ext.ClassManager.instantiateByAliassencha-touch-all.js:15
Ext.apply.factorysencha-touch-all.js:15
Ext.define.factoryItemsencha-touch-all.js:15
Ext.define.addsencha-touch-all.js:15
b.implement.callParentsencha-touch-all.js:15
override.addsencha-touch-all.js:15
Ext.define.applyItemssencha-touch-all.js:15
b.registerPreprocessor.Ext.Object.each.i.(anonymous function)sencha-touch-all.js:15
b.registerPreprocessor.Ext.Object.each.i.(anonymous function).g.(anonymous     function)sencha-touch-all.js:15
Ext.define.applyActiveItemsencha-touch-all.js:15
(anonymous function)sencha-touch-all.js:15
b.implement.initConfigsencha-touch-all.js:15
Ext.define.initializesencha-touch-all.js:15
Ext.define.constructorsencha-touch-all.js:15
b.implement.callParentsencha-touch-all.js:15
Ext.define.constructorsencha-touch-all.js:15
b.implement.callParentsencha-touch-all.js:15
Ext.define.override.constructorsencha-touch-all.js:15
b.implement.callParentsencha-touch-all.js:15
Ext.define.constructorsencha-touch-all.js:15
b.implement.callParentsencha-touch-all.js:15
override.constructorsencha-touch-all.js:15
Ext.apply.create.fsencha-touch-all.js:15
(anonymous function)
Ext.ClassManager.instantiatesencha-touch-all.js:15
(anonymous function)sencha-touch-all.js:15
Ext.apply.createsencha-touch-all.js:15
Ext.define.onBeforeLaunchApplication.js:30
Ext.apply.onDocumentReadysencha-touch-all.js:15
Ext.apply.onReady.nsencha-touch-all.js:15
Ext.apply.triggerReadysencha-touch-all.js:15
Ext.apply.refreshQueuesencha-touch-all.js:15
Ext.apply.refreshQueuesencha-touch-all.js:15
Ext.apply.refreshQueuesencha-touch-all.js:15
Ext.apply.onFileLoadedsencha-touch-all.js:15
(anonymous function)sencha-touch-all.js:15
Ext.apply.injectScriptElement.ksencha-touch-all.js:15

如果我调用自定义函数，而不是尝试调用控制器定义的函数，它会起作用。对于上述其他方式，要么不调用函数，要么视图中不显示图像。大多数情况下没有任何控制台输出。

是否有任何很好的例子可以实现这一点？到目前为止我只找到组件事件。

最好的祝愿， 丹尼尔

Answer 1

您使用的是 Sencha MVC 架构吗？我猜你是看你的代码。

如果是，您应该在app/store/Images.js 中定义您的商店，并在您的app.js 文件中说明您拥有该商店：

Ext.application({
    name: 'Photoalbum',
    stores: ['Images']
});

现在您已经定义了该商店，并将其包含在您的app.js 文件中，您可以随时使用其名称访问它：

{
    xtype: 'list',
    store: 'Images',
    ...
}

您应该永远重新创建该商店的实例。它应该只创建一次（由您的应用程序），然后您可以使用存储的字符串版本。

另外，作为一个快速说明，重写构造函数是非常糟糕的做法。相反，您应该重写 initialize 方法。