[Ext JS 4] 實戰之Grid, Tree Gird 動態添加行

在 [Ext JS 4] 實戰之Grid, Tree Gird 動態添加列 這一篇中，有介紹到如何動態添加一列 -- 設定新columns 後調用reconfigure 方法。

這裡來承接這一篇， 說說如何添加一列？

看上去很簡單， 因為reconfigure方法可以傳入兩個參數，columns 和 store , 看上去設定新的store 後， 調用reconfigure就可以了。

一般的Grid 可以， 但是如果是Tree Grid 的話， 就會拋出異常。

在Ext.grid.Panel中可以，在Ext.tree.Panel會出現錯誤。

細細來看，從Ext js 4 版本之後， reconfigure 這個方法在Ext.tree.Panel中是private 的。

也就是說，Ext.tree.Panel 不再提供reconfigure 的方式來更新群組件了。

那麼，行資料如何更新呢？

不難想到，應該從store 入手。 store 進行load 之後會自動的進行頁面的更新。 剩下的就是， 這個 store 所使用到的屬性是動態。這個怎麼理解？

首先從store 的定義來看，

 store 使用到那些屬性：

1. 可以使用fields 的方式來定義

  var store1 = Ext.create('Ext.data.TreeStore', {              fields: ['task1','task2','task3'],      root:{            "text": ".",            "children": [{'task1':'11','task2':'22','task3':'33'},{'task1':'111','task2':'222','task3':'333'}]      }  });

2. 也可以定義一個Model .

這兩種方式的結果基本差不多， 看實際使用的狀況， 如果屬性是動態改變的， 定義Model 看上去就多餘了。

那以上例子來看（以上的例子是一個最簡單的local store  的定義， 對於ajax 的json store 的定義也可以類似處理），如果新增了一個 task4 這樣一列， store 也需要動態添加一個task4 的屬性， 該如何?。

直接使用 store.fields 這樣的方式得到的是undefined. 正確的方式應該是：

var newFileds = ['task1','task2','task3','task4'];store1.model.setFields(newFileds);store1.getRootNode().appendChild({'task1':'1111','task2':'2222','task3':'3333','task4':'4444'});

備忘：第一種方式(fields)定義的store， 也是通過model.setFields的方式。

Ext js 4 以及之後的版本將tree的reconfigure的方法private 的原因不知道是否是出於效能上的考慮， 因為在IE中， 看上去 速度會比較慢， 但是在chrome 中，表現還不錯。