Ext JS4实战之Grid, Tree Gird 动态添加列续(性能考虑)

归纳一下思路就是: 先显示,后隐藏。

当需要隐藏的栏位很多时,在chrome下速度还行,但是在IE 7中要刷出一个grid 却要 20s 时间之久, 基本上无法接受。(暂不load store, 所以不会是数据影响。)

使用Extjs 自带的 page-analyzer 进行分析发现, 每次调用hide 方法的时候都会进行 layout. 而每次layout 的时间在IE7和Chrome 中的时间相差10倍之多, 也难怪以下图如此描述IE7.

http://ittopic.gotoip1.com/qee/wordpress/wp-content/uploads/2013/10/3629069606_a72bf52c22_o-800x560.jpg

但是问题是,目前使用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 默认不设值。类似如下代码

 

[html][/html] view plaincopy

  1.    var treeGrid1 = Ext.create(‘Ext.tree.Panel’,{
  2.  header: ‘Test Grid’,
  3.  title:’Test Grid’,
  4.  renderTo: Ext.getBody(),
  5.  collapsible: true,
  6.         rootVisible: false,
  7.         autoScroll: true,
  8.         height: 600,
  9.  columns:[],
  10.  plugins:plugin1
  11. });

之后在使用 treeGrid1.reconfigure(store1,cols1); 的方式进行栏位的调整的话, 就可以使用”hidden”:true 的方式隐藏列了。

 

不知道这是Ext js 有意为之, 还是它的一个bug ~~

 

带editor的列的隐藏

如果使用行编辑模式的话

 

[html][/html] view plaincopy

  1. var plugin1 = Ext.create(‘Ext.grid.plugin.RowEditing’, {
  2.    clicksToMoveEditor: 2,
  3.    autoCancel: false
  4. );

使用以上hidden:true 的设置来隐藏有editor列的话, 在show hidden 列的时候, 会发现编辑器会发生错位的状况。

 

看上去是编辑器组件创建的时间上有出入。

这样的话, 对于此状况,只能延续使用 col.hide() 的方法来进行了。

 

综合

在进行设计的时候, 如果 有IE7的考虑,最好结合以下建议
1.hide 栏位不要设置成可以editor
2.editor 栏位尽量显示

标签