僅當列表顯示時更新列表dom

有時候我們使用一個存儲來查看少量視圖（列表，輪播，數據視圖），當我們刷新（加載，過濾）存儲數據時，使用此存儲的所有視圖的dom都將重建，但某些視圖在此時不顯示，可能不會顯示這些數據。我們如何才能刷新列表DOM，只有當它顯示時，不是每次刷新時都刷新？問題examle 僅當列表顯示時更新列表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將會改變，儘管第二和第三列表不會顯示我看到一個選項。創建一個主商店併爲每個視圖創建單獨的商店。當視圖顯示從主商店填滿它時。但它看起來不太好。任何其他想法？

來源

2012-09-24 Nikolai Borisik

據我所知，沒有「開箱即用」的解決方案。 docs說刷新事件是可以預防的，但我沒有測試過這個理論。

另外一個想法是查看dataview source並覆蓋它的一部分。

的出發點可能會是店裏看看事件掛鉤，你可以找到有：

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

但是它很可能是單調乏味的工作完善它。

另一方面，添加新記錄時，不應該爲其他列表刷新DOM，它應該只爲每個列表添加一個新的列表項，以禁用addrecords事件，然後完成整個刷新其他列表顯示時可能會更無效？

來源

2012-09-24 21:36:24 zelexir

僅當列表顯示時更新列表dom

回答

相關問題