盗墓笔记_[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 中， 定義一個(gè)Grid 很方便，主要需要的是
1. 定義columns
2. 定義一個(gè)store
3. 定義grid

```javascript
var store1 = Ext.create('Ext.data.TreeStore', {
  fields: ['task1','task2','task3'],
    root:{
          "text": ".",
          "children": [{'task1':'11','task2':'22','task3':'33'}]
    }
});
  var treeGrid1 = Ext.create('Ext.tree.Panel',{
  header: 'Test Grid',
  renderTo: Ext.getBody(),
  collapsible: true,
  rootVisible: false,
  autoScroll: true,
  height: 600,
  store: store1,
  columns: [{"text":"Task 1","dataIndex":"task1"},
            {"text":"Task 2","dataIndex":"task2"},
            {"text":"Task 3","dataIndex":"task3"}]      
});
```

以上是一個(gè)最簡(jiǎn)單的例子。

### 如何動(dòng)態(tài)添加列
要動(dòng)態(tài)添加一列， 也很簡(jiǎn)單
使用 Grid 的 reconfigure 方法就可以了。
```javascript
var cols1 = [{"text":"Task 1","dataIndex":"task1"},
            {"text":"Task 2","dataIndex":"task2"},
            {"text":"Task 3","dataIndex":"task3"}
          ];
var store1 = Ext.create('Ext.data.TreeStore', {
  fields: ['task1','task2','task3'],
    root:{
          "text": ".",
          "children": [{'task1':'11','task2':'22','task3':'33'}]
    }
});
  var treeGrid1 = Ext.create('Ext.tree.Panel',{
  header: 'Test Grid',
  renderTo: Ext.getBody(),
  collapsible: true,
  rootVisible: false,
  autoScroll: true,
  height: 600,
  store: store1,
  columns: cols1      
});
  //dynamic add col
  cols1.push({"text":"Task 4","dataIndex":"task4"});
  treeGrid1.reconfigure(store1,cols1);
```

也很簡(jiǎn)單。

### 雙擊編輯某行
配置行編輯的plugin 為Ext.grid.plugin.RowEditing， 設置某列編輯的editor
```javascript
var cols1 = [{"text":"Task 1","dataIndex":"task1"},
            {"text":"Task 2","dataIndex":"task2",editor:{xtype:"textfield"}},
            {"text":"Task 3","dataIndex":"task3"}
          ];
var store1 = Ext.create('Ext.data.TreeStore', {
  fields: ['task1','task2','task3'],
    root:{
          "text": ".",
          "children": [{'task1':'11','task2':'22','task3':'33'}]
    }
});
  var treeGrid1 = Ext.create('Ext.tree.Panel',{
  header: 'Test Grid',
  renderTo: Ext.getBody(),
  collapsible: true,
  rootVisible: false,
  autoScroll: true,
  height: 600,
  store: store1,
  columns: cols1,
  plugins:[Ext.create('Ext.grid.plugin.RowEditing', {
	    clicksToMoveEditor: 2,
	    autoCancel: false
	})]
});
  //dynamic add col 
  cols1.push({"text":"Task 4","dataIndex":"task4"});
  treeGrid1.reconfigure(store1,cols1);
```

同樣很簡(jiǎn)單。
下面要進(jìn)入重點(diǎn)了

### 帶隱藏欄位的動(dòng)態(tài)添加
現在有個(gè)需求是某個(gè)欄位默認是隱藏的。默認隱藏也很容易實(shí)現，直接設置hidden 為 true 就可以了。
比如說(shuō)以上設置Task 2 這一列的hidden 為true 的話(huà)
```javascript
var cols1 = [{"text":"Task 1","dataIndex":"task1"},
            {"text":"Task 2","dataIndex":"task2",editor:{xtype:"textfield"},"hidden":true},
            {"text":"Task 3","dataIndex":"task3"}
          ];
var store1 = Ext.create('Ext.data.TreeStore', {
  fields: ['task1','task2','task3'],
    root:{
          "text": ".",
          "children": [{'task1':'11','task2':'22','task3':'33'}]
    }
});
  var treeGrid1 = Ext.create('Ext.tree.Panel',{
  header: 'Test Grid',
  renderTo: Ext.getBody(),
  collapsible: true,
  rootVisible: false,
  autoScroll: true,
  height: 600,
  store: store1,
  columns: cols1,
  plugins:[Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 2,
        autoCancel: false
    })]
});
  //dynamic add col 
  cols1.push({"text":"Task 4","dataIndex":"task4"});
  treeGrid1.reconfigure(store1,cols1);
```
以上代碼運行就會(huì )出現錯誤：
Uncaught TypeError: Object [object Object] has no method 'hasEditor'

如果使用debug 的js 的話(huà)， 會(huì )報在107028.
究其原因是：
1. Edit 的plugin 在初始化時(shí)會(huì )調用initFieldAccessors(columns)這個(gè)方法。 對每個(gè)列添加hasEditor 和 Editor 相關(guān)的一些方法和對象。
但是這里獲取columns 的方法是  grid.getView().getGridColumns()
也就是說(shuō)， hidden 的col 不會(huì )被找到
2. 而在執行reconfigure的時(shí)候又會(huì )用到hasEditor這個(gè)方法。導致找不到出錯。

想到的解決思路有很多中：
1. 修改extjs 的 js 文件， 做非空判斷。
這種方法需要修改 ext 本身的東西， 對于升級和維護的話(huà)都不是很好。
2. 還是從hasEditor這個(gè)方法入手。 對于hidden 類(lèi)型的  col , 添加一個(gè)空的hasEditor方法。類(lèi)似
```javascript
{"text":"Task 2","dataIndex":"task2",editor:{xtype:"textfield"},"hidden":true:hasEditor:function(){}}
```
錯誤是解決了。
在view 的狀態(tài)下是可以， 但是在edit 狀態(tài)時(shí)， 編輯框的位置會(huì )錯位，跑到最后面去。
3.  從plugin 入手。
以上方法不行，是否是因為不僅僅是要設置hasEditor，如果這樣，模擬它本身的處理方式，調用initFieldAccessors（注意這個(gè)方法是 plugin 的）
```javascript
plugin.initFieldAccessors(treeGrid.headerCt.getGridColumns()); 
var cols1 = [{"text":"Task 1","dataIndex":"task1"},
            {"text":"Task 2","dataIndex":"task2",editor:{xtype:"textfield"},"hidden":true},
            {"text":"Task 3","dataIndex":"task3"}
          ];
var store1 = Ext.create('Ext.data.TreeStore', {
  fields: ['task1','task2','task3'],
    root:{
          "text": ".",
          "children": [{'task1':'11','task2':'22','task3':'33'}]
    }
});
var plugin1 = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToMoveEditor: 2,
    autoCancel: false
});
  var treeGrid1 = Ext.create('Ext.tree.Panel',{
  header: 'Test Grid',
  renderTo: Ext.getBody(),
  collapsible: true,
    rootVisible: false,
    autoScroll: true,
    height: 600,
  store: store1,
  columns: cols1,
  plugins:plugin1
});
  plugin1.initFieldAccessors(treeGrid1.headerCt.getGridColumns()); 
  //dynamic add col 
  cols1.push({"text":"Task 4","dataIndex":"task4"});
  treeGrid1.reconfigure(store1,cols1);
```
還是出現編輯框錯位。

### 終極解決方法
看來(lái)此種狀況無(wú)法使用hidden 來(lái)隱藏欄位了。
既然無(wú)法通過(guò)config 的方式隱藏， 在grid 創(chuàng  )建出來(lái)之后使用 hide()方法來(lái)隱藏總可以吧。
配置的時(shí)候給一個(gè) hiddencol 的名字（可以隨便?。?
{"text":"Task 2","dataIndex":"task2",hiddencol:true}
寫(xiě)一個(gè)function
```javascript
function hideGridCols(grid)
{
	if(grid!=null)
	{
		var gridCols = grid.headerCt.getGridColumns();
		if(gridCols!=null&&gridCols.length>0)
		{
			 for(var i=0;i
			  {
				  var gridCol = gridCols[i];
				  var cfg = gridCol.initialConfig;
				  if(cfg.hiddencol!=null&&cfg.hiddencol===true)
				  {
					  gridCol.hide();
				  }		  
			  }
		}
	}		 
}
```

在grid 創(chuàng  )建完或是reconfig 的時(shí)候調用這個(gè)方法，問(wèn)題解決。

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)站導航