Question

I have pretty much the same question as stated here: Set listener for store events in a controller, but I tried all the different solutions and none works. My favorite solution wa sthis one:

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

There I get the following excpetion:

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

If I call a self-defined function, instead of trying to calling the Controller defined function, it works. For the other ways described above, either the function is not called or the images are not shown in the view. Mostly withoput any console output.

Are there maybe any nice examples which implemented that? I only find component events so far.

Best wishes,
Daniel

Answer 1

Are you using the Sencha MVC architecture? I presume you are from looking at your code.

If you are, you should define your store in app/store/Images.js, and the say in your app.js file that you have that store:

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

Now that you have defined that store, and included it in your app.js file, you can access it at anytime using its name:

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

You should never recreate an instance of that store. It should only be created once (by your application) and then you can use the string version of the store.

Also, as a quick note, it is very bad practice to override constructor. Instead you should override the initialize method.