[Ext JS 4] 实战之Grid, Tree Gird 动态添加行| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4] 实战之Grid, Tree Gird 动态添加行

## [Ext JS 4] 实战之Grid, Tree Gird 动态添加行
### 前言
在
[Ext JS 4] 实战之Grid, Tree Gird 动态添加列
http://blog.csdn.net/oscar999/article/details/11819211
这一篇中，有介绍到如何动态添加一列 -- 设置新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 的方式来定义
	 ```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. 也可以定义一个Model .
这两种方式的结果基本差不多， 看实际使用的状况， 如果属性是动态改变的， 定义Model 看上去就多余了。

那以上例子来看（以上的例子是一个最简单的local store  的定义， 对于ajax 的json store 的定义也可以类似处理），如果新增了一个 task4 这样一列， store 也需要动态添加一个task4 的属性， 该如何实现。
直接使用 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， 也是通过model.setFields的方式。

#### 结言
Ext js 4 以及之后的版本将tree的reconfigure的方法private 的原因不知道是否是出于性能上的考虑， 因为在IE中， 看上去 速度会比较慢， 但是在chrome 中，表现还不错。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] 实战之Grid, Tree Gird 动态添加行

网站导航