列出并存储绑定...完全相同的数据

Question

我正在使用 sencha 创建一个具有多个卡片面板的轮播。每个面板都包含一个列表组件，该组件附加到其自己的商店实例。 所有列表存储实例都调用相同的 API 来获取数据，但使用不同的参数。

例子： 卡 1，列表 1 已附加到调用 mywebsite.com/api?node=1 的商店 1 卡 2，将列表 2 附加到调用 mywebsite.com/api?node=2 的存储 2，

卡 1 显示从 API 检索的正确节点集。但是，一旦我滑动查看卡 2，列表 1 和列表 2 都显示完全相同的数据，尽管每个列表都应该有自己的列表 od 数据。

代码：

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

列表视图：

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

动态创建列表视图的主视图

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

这真的很奇怪...我只是想知道，sencha 是否分配完全相同的商店，模型，列表组件...不知道在哪里看

Answer 1

在 loadListView 函数中，我必须创建一个存储对象并将其动态分配给列表，而不是修改现有存储。

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