Using 2 unique instances of a store & MVC

[hallikpapa]

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?

[jay@moduscreate.com]

that doesn't make sense. Each grid does have its own instance.

Have you checked your network pane in webkit? Do you see multiple requests to the web service?

[hallikpapa]

Yes, I see two requests. And the response that comes back is two separate arrays of json data. The only thing I changed in the code was making the call in the grid constructor. The behavior was similar right up until the call.

I am going to plugin PR4 today and see if anything is different.

[hallikpapa]

After plugging everything into PR4 and using the code in the OP, I still get two grids, with both the same data, even though two separate calls are made returning different data. When I breakpoint before loading the 2nd grid, it shows the first chunk of data, when the 2nd grid is done loading, it's data is displayed in both grids, wiping out the data from the first call.

I also notice that both stores have the same id when I breakpoint in the store load listener. I am using the grid ux plugin for ST2, but the fact still remains that I am instantiated two separate grid classes (both grids have separate id's when created) but are somehow still sharing the same store.

There's not really a render listener/event in the plugin, but maybe somehow I can fire the creation & loading of the stores in the controller after it's rendered. Still testing stuff so we'll see.

[hallikpapa]

I added a 'control' in my controller:

control: {
            topCarousel: {
                show    : 'topPageCarouselShow'
            }
        },

Then I only make one call, to load the grid that is active:

topPageCarouselShow : function(x, y, z) {
        var carousel = this.getTopCarousel(),
             grid = carousel.getActiveItem().getStore().load({params : {ufq : grid.title}});

    },

This 'works', but with the other method watching when the carousel active item changes, it creates a new api call to reload the data from the server whenever I swipe on the carousel. I am still stuck with one store holding all data instead of two instantiated stores with their own data...

[hallikpapa]

Maybe this is a bug?