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

前言

延续： 

[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;