古风_[Ext JS 4] 實(shí)戰之Grid, Tree Gird 動(dòng)態(tài)添加列續(性能考慮)| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS 4] 實(shí)戰之Grid, Tree Gird 動(dòng)態(tài)添加列續(性能考慮)

## [Ext JS 4] 實(shí)戰之Grid, Tree Gird 動(dòng)態(tài)添加列續(性能考慮)
### 前言
延續： 
[Ext JS 4] 實(shí)戰之Grid, Tree Gird 動(dòng)態(tài)添加列
http://blog.csdn.net/oscar999/article/details/11819211
這一篇。
在上一篇中有提到在grid 中如何進(jìn)行帶隱藏欄位的動(dòng)態(tài)添加方式。歸納一下思路就是： 先顯示，后隱藏。
當需要隱藏的欄位很多時(shí)，在chrome下速度還行，但是在IE 7中要刷出一個(gè)grid 卻要 20s 時(shí)間之久， 基本上無(wú)法接受。（暫不load store, 所以不會(huì )是數據影響。）
使用Extjs 自帶的 page-analyzer 進(jìn)行分析發(fā)現， 每次調用hide 方法的時(shí)候都會(huì )進(jìn)行 layout. 而每次layout 的時(shí)間在IE7和Chrome 中的時(shí)間相差10倍之多， 也難怪以下圖如此描述IE7.

但是問(wèn)題是，目前使用IE 7的用戶(hù)還是有很多， Ext js 本身對IE 7 的支持也還好， 所以針對IE 7 需要做特別的性能優(yōu)化了。如果徹底摒棄了IE 7 , 不受IE 7困擾的話(huà)， 以下部分就可以不看了。
綜合一下思路， 需要解決的問(wèn)題有：
1. reconfigure 方法遇到有hidden為true 的col 時(shí)， 會(huì )報沒(méi)有hasEditor 方法。
2. 有Editor的 col 如何進(jìn)行hide

### reconfigure 方法遇到有hidden為true 的col 時(shí)， 會(huì )報沒(méi)有hasEditor 方法
這個(gè)問(wèn)題有解法：
就是在Grid Panel 定義是columns 默認不設值。類(lèi)似如下代碼
   ```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); 的方式進(jìn)行欄位的調整的話(huà)， 就可以使用"hidden":true 的方式隱藏列了。
不知道這是Ext js 有意為之， 還是它的一個(gè)bug ~~

### 帶editor的列的隱藏
如果使用行編輯模式的話(huà)
```javascript
	  var plugin1 = Ext.create('Ext.grid.plugin.RowEditing', {
		    clicksToMoveEditor: 2,
		    autoCancel: false
		})
```

使用以上hidden:true 的設置來(lái)隱藏有editor列的話(huà)， 在show hidden 列的時(shí)候， 會(huì )發(fā)現編輯器會(huì )發(fā)生錯位的狀況。
看上去是編輯器組件創(chuàng  )建的時(shí)間上有出入。
這樣的話(huà)， 對于此狀況，只能延續使用 col.hide() 的方法來(lái)進(jìn)行了。

### 綜合
在進(jìn)行設計的時(shí)候， 如果 有IE7的考慮，最好結合以下建議
1.hide 欄位不要設置成可以editor
2.editor 欄位盡量顯示

### 其他
1. 在編輯模式下，數據量很大的狀況下， 如果store 有變化的話(huà)，
盡量使用 model.data[att] 的方式來(lái)改變值
而不使用 Ext.data.Model 的set 方法。
原因是這個(gè)方法會(huì )觸發(fā)比較多的時(shí)間， 速度會(huì )慢很多。
使用這個(gè)方式是，
store 的 getModifiedRecords( ) 會(huì )失效。
所以在設置值之后， 還要表示這個(gè)record 被修改過(guò)
record.dirty=true;

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS 4] 實(shí)戰之Grid, Tree Gird 動(dòng)態(tài)添加列續(性能考慮)

網(wǎng)站導航