Question

I have a simple test app where I have a carousel that will instantiate multiple of the same type of grid, each grid having it’s own copy of a store.

Carousel:

Ext.define('App.view.TopPageCarousel', {
extend: 'Ext.Carousel',
xtype : 'app-toppagecarousel',
requires: ['Ext.Carousel', 'App.view.TopPageGrid'],
config: {
    title: 'Top Pages',
    items: [{
        xtype : 'app-toppagegrid',
        title : 'titleA'
    },{
        xtype : 'app-toppagegrid',
        title : 'titleB'
    }]
}

});

At first I was defining the store in the grid as a property in its config and I have the controller listening for store changes, just to let me know it was being loaded. The ajax call is made and the grid was populated. However, All grid’s were populated with the same data even though unique data was being returned with each call.

Then I found a post that said I needed to instantiate the stores as the grid is being populated, like so:

constructor : function() {
    var me = this;
    Ext.apply(me, {
        store : me.buildStore()
    });
    me.callParent(arguments);
    me.store.load({params : {ufq : this.title}});
},
buildStore : function() {
    return Ext.create('App.store.Links');
}

This sort of works. The ajax call is being made, but the grid isn’t being populated now and I am not seeing the console.log(“Store loaded”); being executed that I placed in the controller. What am I doing wrong?

Answer 1

It turns out in ST2 instead of using Ext.create, the best thing to do is (in my particular instance, not as a standard):

constructor : function() {
    this.callParent(arguments);
    Ext.setStore('App.store.Links');
},

Using Ext.getStore & Ext.setStore are necessary now if you want a lot of the benefits that go along with events & the store manager.