[Ext JS 4] 实战之Grid, Tree Gird 动态添加列续(性能考虑)
2013-10-18 10:30
323 查看
前言
延续:[Ext JS 4] 实战之Grid, Tree Gird 动态添加列
这一篇。在上一篇中有提到在grid 中如何进行带隐藏栏位的动态添加方式。归纳一下思路就是: 先显示,后隐藏。
当需要隐藏的栏位很多时,在chrome下速度还行,但是在IE 7中要刷出一个grid 却要 20s 时间之久, 基本上无法接受。(暂不load store, 所以不会是数据影响。)
使用Extjs 自带的 page-analyzer 进行分析发现, 每次调用hide 方法的时候都会进行 layout. 而每次layout 的时间在IE7和Chrome 中的时间相差10倍之多, 也难怪以下图如此描述IE7.
但是问题是,目前使用IE 7的用户还是有很多, Ext js 本身对IE 7 的支持也还好, 所以针对IE 7 需要做特别的性能优化了。如果彻底摒弃了IE 7 , 不受IE 7困扰的话, 以下部分就可以不看了。
综合一下思路, 需要解决的问题有:
1. reconfigure 方法遇到有hidden为true 的col 时, 会报没有hasEditor 方法。
2. 有Editor的 col 如何进行hide
reconfigure 方法遇到有hidden为true 的col 时, 会报没有hasEditor 方法
这个问题有解法:就是在Grid Panel 定义是columns 默认不设值。类似如下代码
var treeGrid1 = Ext.create('Ext.tree.Panel',{ header: 'Test Grid', title:'Test Grid', renderTo: Ext.getBody(), collapsible: true, rootVisible: false, autoScroll: true, height: 600, columns:[], plugins:plugin1 });之后在使用 treeGrid1.reconfigure(store1,cols1); 的方式进行栏位的调整的话, 就可以使用"hidden":true 的方式隐藏列了。
不知道这是Ext js 有意为之, 还是它的一个bug ~~
带editor的列的隐藏
如果使用行编辑模式的话var plugin1 = Ext.create('Ext.grid.plugin.RowEditing', { clicksToMoveEditor: 2, autoCancel: false });
使用以上hidden:true 的设置来隐藏有editor列的话, 在show hidden 列的时候, 会发现编辑器会发生错位的状况。
看上去是编辑器组件创建的时间上有出入。
这样的话, 对于此状况,只能延续使用 col.hide() 的方法来进行了。
综合
在进行设计的时候, 如果 有IE7的考虑,最好结合以下建议1.hide 栏位不要设置成可以editor
2.editor 栏位尽量显示
其他
1. 在编辑模式下,数据量很大的状况下, 如果store 有变化的话,尽量使用 model.data[att] 的方式来改变值
而不使用 Ext.data.Model 的set 方法。
原因是这个方法会触发比较多的时间, 速度会慢很多。
使用这个方式是,
store 的 getModifiedRecords( ) 会失效。
所以在设置值之后, 还要表示这个record 被修改过
record.dirty=true;
相关文章推荐
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加列续(性能考虑)
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加列
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加行
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加列
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加行
- [Ext JS 4] 实战之Grid, Tree Gird 添加按钮列
- [Ext JS 4] 实战之Grid, Tree Gird 添加按钮列
- [Ext JS 4] 实战之Grid, Tree Gird 添加按钮列
- 动态添加tab(ext中的treePanel)
- 第01天实战技术(13):Runtime(动态添加属性)
- [Ext JS 4] Grid 实战之分页功能
- 《转》PyQt4 动态添加treeWidget 的列表项
- easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮
- runtime实战(二)动态添加方法
- ext js 用servlet动态加载grid
- Android实战简易教程<四>(ScrollView和HorizontalScrollView动态添加控件并提供事件监听)
- easyui treegrid动态加载节点
- silverlight 在grid下面动态添加行
- runtime实战(二)动态添加方法
- easyui手风琴配合tree 加tab 的数据库动态添加