Question

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

实施例：卡1，列表1附加到商店1，调用mywebsite.com/api?node=1 卡2，附加到商店2的列表2，称为mywebsite.com/api?node=2

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

代码：

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函数中，我必须创建一个store对象并将其动态分配给列表，而不是修改现有的store。

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

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

1 个答案: