1. 首頁
  2. 問答
  3. Extjs動態網格

Extjs動態網格

2010-03-12 89 views
3

我想用Extjs創建一個動態網格。當點擊事件被觸發時，網格被構建和顯示，然後ajax請求被髮送到服務器以獲取列，記錄和記錄定義a.k.a存儲字段。每個節點可以具有不同的網格結構，並且取決於樹中節點的級別。Extjs動態網格

我想出了迄今爲止唯一的辦法就是

 function showGrid(response, request) {     
     var jsonData = Ext.util.JSON.decode(response.responseText);     
     var grid = Ext.getCmp('contentGrid'+request.params.owner); 

     if(grid) { 
      grid.destroy();         
     } 

     var store = new Ext.data.ArrayStore({ 
      id : 'arrayStore',     
      fields : jsonData.recordFields, 
      autoDestroy : true 
     });    

     grid = new Ext.grid.GridPanel({ 
      defaults: {sortable:true}, 
      id:'contentGrid'+request.params.owner, 
      store: store,   
      columns: jsonData.columns, 
      //width:540, 
      //height:200, 
      loadMask: true 
     });   


     store.loadData(jsonData.records);   
     if(Ext.getCmp('tab-'+request.params.owner)) { 
      Ext.getCmp('tab-'+request.params.owner).show(); 
     } else {     
      grid.render('grid-div'); 
      Ext.getCmp('card-tabs-panel').add({ 
      id:'tab-'+request.params.owner, 
      title: request.params.text, 
      iconCls:'silk-tab', 
      html:Ext.getDom('grid-div').innerHTML, 
      closable:true 
      }).show();   
     } 
    }

的功能時點擊事件被觸發

 'click': function(node) { 
      Ext.Ajax.request({ 
       url: 'showCtn', 
       success: function(response, request) {        
        alert('Success');             
        showGrid(response,request); 
       }, 
       failure: function(results, request) { 
        alert('Error'); 
       }, 
       params: Ext.urlDecode(node.attributes.options);           
     }

我與這段代碼獲得的問題是，上述被稱爲每次showGrid函數被調用時都會顯示一個新的網格。最終用戶會看到舊的網格和新的網格。爲了緩解這個問題，我嘗試銷燬網格，並刪除每個請求上的網格元素，這似乎解決了問題，只有記錄從未顯示這次。

if(grid) { 
      grid.destroy(true);         
     }

我在找的行爲是一個選項卡中顯示網格的結果，如果該選項卡存在代替了舊的網格。任何幫助表示讚賞。

謝謝

來源

2010-03-12 ken

回答

3

當您嘗試網格添加到標籤是這樣的：

html:Ext.getDom('grid-div').innerHTML,

分機不知道它是一個有效的網格組件的。相反，您只需添加HTML標記，看起來像是一個網格，但TabPanel不會意識到它是一個網格組件。相反，您應該將網格本身添加爲選項卡（GridPanel 是Panel，不需要嵌套到父面板中）。你可以這樣做，也適用所需的標籤CONFIGS這樣的：

Ext.getCmp('card-tabs-panel').add(
     Ext.apply(grid, { 
      id:'tab-'+request.params.owner, 
      title: request.params.text, 
      iconCls:'silk-tab', 
      closable:true 
     }); 
    }).show();

BTW，不斷創建和銷燬網格是不是一個理想的策略，如果你能避免它。如果可能的話（假設網格類型是有限的），根據需要哪種類型的網格簡單地隱藏和重新顯示網格（並重新加載它們的數據）可能會更好。

來源

2010-03-12 08:35:25

+0

大它的工作原理。謝謝。 至於摧毀和重建每一次電網，我不能保證數量有限的電網，所以我別無選擇。順便說一句爲什麼銷燬電網不被認爲是一個好策略？ – ken 2010-03-12 20:45:13

+1

GridPanel在標記和內存佔用方面都是最重的組件（除了可能有很多節點的TreePanel外）。如果你不小心（或者如果Ext像過去一樣有任何與組件銷燬有關的錯誤），那麼隨着時間的推移，這可能導致DOM泄漏。此外，從用戶的角度來看，創建網格非常耗時，因此重新創建網格而不是簡單地展示隱藏網格是您應用感知性能的一大差異（尤其是在經常按照您的操作進行時）。很高興你解決了你的問題。 – 2010-03-12 23:19:50

+0

很高興知道。如果我可以控制請求的網格數，我會嘗試更多地關注這一點。也許有一組網格來服務並限制他們的數量。 – ken 2010-03-13 06:19:57

相關問題

 相關問題