Question

有时我们使用一个商店用于少量视图（列表，轮播，数据视图），当我们刷新（加载，过滤）商店数据时，将重建使用此商店的所有视图的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将被更改，尽管第二和第三列表未显示我看到一个选项。创建一个主存储并为每个视图创建单独的存储。当视图显示填充它从主商店存储。但它看起来并不好。还有其他想法吗？

Answer 1

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

另一个想法是查看dataview source并覆盖它的一部分。

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

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

然而，完善它可能是一项繁琐的工作。

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

仅在显示列表时更新列表dom

1 个答案: