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

[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 中，表现还不错。