0

有时我们为几个视图（列表，轮播，数据视图）使用一个存储，当我们刷新（加载，过滤）存储数据时，使用该存储的所有视图的dom都将被重建，但此时某些视图不显示，并且可能不会显示这些数据。我们如何仅在显示时刷新列表 dom，而不是每次存储刷新时刷新？问题示例 

Ext.define("Test.view.Main", {
    extend: 'Ext.tab.Panel',
    config: {
        tabBarPosition: 'bottom',

        items: [ ]
    },

    constructor : function(){
        this.callParent(arguments);
        var store = Ext.create('Ext.data.Store',{
                data :[
                    {title : 'One'},
                    {title : 'Two'},
                    {title : 'Three'}
                ]
            }),
            firstList = Ext.create('Ext.List',{
                title : 'tab1',
                store : store,
                itemTpl : '{title}',
                onItemDisclosure : function(){
                    store.add({title : 'Four'});
                }
            }),

            secondList = Ext.create('Ext.List',{
                title : 'tab2' ,
                store : store,
                itemTpl : '{title}'

            }),

             thirdList = Ext.create('Ext.List',{
                title : 'tab3',
                store : store,
                itemTpl : '{title}'

            });

        this.add([
            firstList,
            secondList,
            thirdList
        ]) ;
    }
});

当点击第一个列表中的项目时，商店中将添加新项目。尽管没有显示第二和第三个列表，但所有列表的 dom 都将发生变化，我看到了一个选项。创建一个主商店并为每个视图创建单独的商店。当视图显示从主商店填充它时。但是看起来不太好。还有其他想法吗？

4

1 回答 1

2

据我所知，没有“开箱即用”的解决方案。文档说刷新事件是可以预防的，但我还没有测试过这个理论。

另一种想法是查看数据视图源并覆盖其中的一部分。

起点可能是查看您可以在那里找到的商店事件挂钩：

storeEventHooks: {
    beforeload: 'onBeforeLoad',
    load: 'onLoad',
    refresh: 'refresh',
    addrecords: 'onStoreAdd',
    removerecords: 'onStoreRemove',
    updaterecord: 'onStoreUpdate'
}

然而，完善它可能是乏味的工作。

另一方面，当添加新记录时，您的 DOM 不应该为其他列表刷新，它应该只向每个列表添加一个新列表项，因此禁用 addrecords 事件，然后在其他列表时完全刷新它们都显示可能会更无效？

于 2012-09-24T21:36:24.920 回答