仅当显示列表时才更新列表DOM-前端问题

Update list dom only if list displayed(仅当显示列表时才更新列表DOM)

本文介绍了仅当显示列表时才更新列表DOM的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有时，我们将一个存储用于少数几个视图(列表、传送带、数据视图)，当我们刷新(加载、筛选)存储数据时，将重建使用该存储所有视图的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事件，然后在显示其他列表时完全刷新它们可能会更加无效？

这篇关于仅当显示列表时才更新列表DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！