[Ext JS 4] 实战之Grid, Tree Gird 动态添加列续(性能考虑)| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

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

## [Ext JS 4] 实战之Grid, Tree Gird 动态添加列续(性能考虑)
### 前言
延续： 
[Ext JS 4] 实战之Grid, Tree Gird 动态添加列
http://blog.csdn.net/oscar999/article/details/11819211
这一篇。
在上一篇中有提到在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 默认不设值。类似如下代码
   ```javascript
   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的列的隐藏
如果使用行编辑模式的话
```javascript
	  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;

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

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

网站导航