魔天记忘语小说_[Ext JS 4] 實(shí)戰之Grid, Tree Gird 動(dòng)態(tài)添加行| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS 4] 實(shí)戰之Grid, Tree Gird 動(dòng)態(tài)添加行

## [Ext JS 4] 實(shí)戰之Grid, Tree Gird 動(dòng)態(tài)添加行
### 前言
在
[Ext JS 4] 實(shí)戰之Grid, Tree Gird 動(dòng)態(tài)添加列
http://blog.csdn.net/oscar999/article/details/11819211
這一篇中，有介紹到如何動(dòng)態(tài)添加一列 -- 設置新columns 后調用reconfigure 方法。
這里來(lái)承接這一篇， 說(shuō)說(shuō)如何添加一列？
看上去很簡(jiǎn)單， 因為reconfigure方法可以傳入兩個(gè)參數，columns 和 store , 看上去設置新的store 后， 調用reconfigure就可以了。
一般的Grid 可以， 但是如果是Tree Grid 的話(huà)， 就會(huì )拋出異常。

### 原因探求
在Ext.grid.Panel中可以，在Ext.tree.Panel會(huì )出現錯誤。
細細來(lái)看，從Ext js 4 版本之后， reconfigure 這個(gè)方法在Ext.tree.Panel中是private 的。
也就是說(shuō)，Ext.tree.Panel 不再提供reconfigure 的方式來(lái)更新組件了。
那么，行數據如何更新呢？
不難想到，應該從store 入手。 store 進(jìn)行load 之后會(huì )自動(dòng)的進(jìn)行頁(yè)面的更新。 剩下的就是， 這個(gè) store 所使用到的屬性是動(dòng)態(tài)的。這個(gè)怎么理解？
首先從store 的定義來(lái)看，
 store 使用到那些屬性：
1. 可以使用fields 的方式來(lái)定義
	 ```javascript
 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. 也可以定義一個(gè)Model .
這兩種方式的結果基本差不多， 看實(shí)際使用的狀況， 如果屬性是動(dòng)態(tài)改變的， 定義Model 看上去就多余了。

那以上例子來(lái)看（以上的例子是一個(gè)最簡(jiǎn)單的local store  的定義， 對于ajax 的json store 的定義也可以類(lèi)似處理），如果新增了一個(gè) task4 這樣一列， store 也需要動(dòng)態(tài)添加一個(gè)task4 的屬性， 該如何實(shí)現。
直接使用 store.fields 這樣的方式得到的是undefined. 正確的方式應該是：
```javascript
	var newFileds = ['task1','task2','task3','task4'];	
	store1.model.setFields(newFileds);
	store1.getRootNode().appendChild({'task1':'1111','task2':'2222','task3':'3333','task4':'4444'});
```
備注：第一種方式(fields)定義的store， 也是通過(guò)model.setFields的方式。

#### 結言
Ext js 4 以及之后的版本將tree的reconfigure的方法private 的原因不知道是否是出于性能上的考慮， 因為在IE中， 看上去 速度會(huì )比較慢， 但是在chrome 中，表現還不錯。

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS 4] 實(shí)戰之Grid, Tree Gird 動(dòng)態(tài)添加行

網(wǎng)站導航