仅当显示列表时才更新列表DOM

2022-04-04 00:00:00 javascript sencha-touch sencha-touch-2
有时,我们将一个存储用于少数几个视图(列表、传送带、数据视图),当我们刷新(加载、筛选)存储数据时,将重建使用该存储所有视图的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将会改变 我看到了一个选择。创建一个主存储,并为每个视图创建单独的存储。并在观看演出时从主店填满它的店铺。但它看起来不太好。还有其他想法吗?


解决方案

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

另一个想法是查看dataview source并覆盖其部分内容。

起点可能是查看您可以在那里找到的存储事件挂钩:

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

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

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

相关文章