Question

I am using sencha to create a carousel which has multiple card panels. Each panel contains a list component that is attached to its own instance of a store.
All lists store instances call the same API to fetch the data but with different parameters.

Example:
Card 1, Has list 1 attached to Store 1 which calls mywebsite.com/api?node=1
Card 2, Has list 2 attached to Store 2 which calls mywebsite.com/api?node=2

Card 1 shows the right set of nodes retrieved from the API. But once i swipe to see card 2, both list 1 and list 2 show the exact same data although each one should have its own list od data.

Code:

Test.data.NodeStore = Ext.extend(Ext.data.Store, {
    constructor : function(config) {
        config = Ext.apply({
            model: 'Test.models.Node',
            autoLoad: false,
            pageSize: 20,
            proxy: {
                type: 'scripttag',
                url: Test.API.URL + '?action=getNodes',
                extraParams: {
                },
                reader: {
                    type: 'json'
                }
            },
            setSource: function(source) {
                if(this.getProxy().extraParams.sourceID != source) {
                    this.getProxy().extraParams.sourceID = source;
                }
            }
        }, config);                 
        Test.data.NodeStore.superclass.constructor.call(this, config);
    }, 

    onDestroy : function(config) {
        Test.data.NodeStore.superclass.onDestroy.apply(this, arguments);
    }
});
Ext.reg('NodeStore', Test.data.NodeStore);

The list view:

Test.views.ListView = Ext.extend(Ext.Panel, {
    sourceID: 0,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [
        {
            xtype: 'list',
            itemTpl : new Ext.XTemplate("<div class='node'>{title}</div>"),
            store: Ext.create(Test.data.NodeStore, {}),
        }
    ],
    setSource: function(source) {
        this.sourceID = source;
        var store = this.items.get(0).getStore();

        store.setSource(source);

        store.load();
    }
});

The main view which creates list views dynamically

Test.views.Viewer = Ext.extend(Ext.Carousel, {  
    indicator: false,
    layout: 'card',
    style: {
        padding: '0 20px'
    },
    items: [

    ],
    loadListView: function(listIndex) {
        var currentRecord = Test.stores.ListStore.getAt(listIndex);
        var newList = new Test.views.ListView();
        newList.setSource(currentRecord.get('ID'));

        this.add(newList);
        this.doLayout();

    },
    initComponent: function() {
        Test.views.Viewer.superclass.initComponent.apply(this, arguments);
        loadListView(1);
        loadListView(2);
    }
});

This is really wierd… i am just wondering, is sencha assigning the exact same store, model, list component… don’t know where to look

Answer 1

In the loadListView function, i had to create an object of store and assign it to the list dynamically rather than modifying existing store.

newList.items.get(0).store = Ext.create(Test.data.NodeStore, {});