[Ext JS 4] 实战之Grid, Tree Gird 动态添加行
来源:互联网 发布:优化实践技能 编辑:程序博客网 时间:2024/06/05 04:32
前言
在
[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 中,表现还不错。
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加行
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加列
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加列续(性能考虑)
- [Ext JS 4] 实战之Grid, Tree Gird编辑Cell
- [Ext JS 4] 实战之Grid, Tree Gird 添加按钮列
- [Ext JS 4] Grid 实战之分页功能
- [Ext JS 4] Grid 实战之分页功能
- [Ext JS 4] Grid 实战之分页功能
- EXT JS 4 grid动态隐藏列
- 《Ext JS 4 First Look》翻译之五:Grid、Tree和Form
- [Ext JS 4] 实战之Load Mask - 在Grid Reconfigure的使用状况
- [Ext JS 4] Grid 中的单元格添加Tooltip 的效果
- Ext 动态添加grid 列数
- EXT 4gird 隐藏列
- ext js 用servlet动态加载grid
- [Ext JS 4] Grid 组件
- [Ext JS 4] 实战之浏览器兼容
- Ext js 4 动态Grid(包括动态列和动态数据)
- ViewPager例子//水平滑动
- C++标准模板库分析之二
- 六款优秀的Linux Web缓存开源软
- Ubuntu linux中怎么查看自己的串口连接情况
- 原码、反码、补码、移码
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加行
- 最近链接
- java : FILE , FILEINPUTSTREAM, FILEREADER,WRITER ECTS.
- Linux下的avr系列的编译烧录调试方法
- Log4j学习(2)----实例
- 深入System.Web.Caching命名空间 教你Hold住缓存管理(一)
- Timus1286(欧几里德算法的应用)
- 深入System.Web.Caching命名空间 教你Hold住缓存管理(二)
- 最长回文串奇偶情况