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

Ext JS开发大全

CmsWing

[Ext JS 4] 实战之Grid, Tree Gird 动态添加列

## [Ext JS 4] 实战之Grid, Tree Gird 动态添加列
### 前言
在Ext js 中， 定义一个Grid 很方便，主要需要的是
1. 定义columns
2. 定义一个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"}]      
});
```

以上是一个最简单的例子。

### 如何动态添加列
要动态添加一列， 也很简单
使用 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);
```

也很简单。

### 双击编辑某行
配置行编辑的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);
```

同样很简单。
下面要进入重点了

### 带隐藏栏位的动态添加
现在有个需求是某个栏位默认是隐藏的。默认隐藏也很容易实现，直接设置hidden 为 true 就可以了。
比如说以上设置Task 2 这一列的hidden 为true 的话
```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);
```
以上代码运行就会出现错误：
Uncaught TypeError: Object [object Object] has no method 'hasEditor'

如果使用debug 的js 的话， 会报在107028.
究其原因是：
1. Edit 的plugin 在初始化时会调用initFieldAccessors(columns)这个方法。 对每个列添加hasEditor 和 Editor 相关的一些方法和对象。
但是这里获取columns 的方法是  grid.getView().getGridColumns()
也就是说， hidden 的col 不会被找到
2. 而在执行reconfigure的时候又会用到hasEditor这个方法。导致找不到出错。

想到的解决思路有很多中：
1. 修改extjs 的 js 文件， 做非空判断。
这种方法需要修改 ext 本身的东西， 对于升级和维护的话都不是很好。
2. 还是从hasEditor这个方法入手。 对于hidden 类型的  col , 添加一个空的hasEditor方法。类似
```javascript
{"text":"Task 2","dataIndex":"task2",editor:{xtype:"textfield"},"hidden":true:hasEditor:function(){}}
```
错误是解决了。
在view 的状态下是可以， 但是在edit 状态时， 编辑框的位置会错位，跑到最后面去。
3.  从plugin 入手。
以上方法不行，是否是因为不仅仅是要设置hasEditor，如果这样，模拟它本身的处理方式，调用initFieldAccessors（注意这个方法是 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);
```
还是出现编辑框错位。

### 终极解决方法
看来此种状况无法使用hidden 来隐藏栏位了。
既然无法通过config 的方式隐藏， 在grid 创建出来之后使用 hide()方法来隐藏总可以吧。
配置的时候给一个 hiddencol 的名字（可以随便取）
{"text":"Task 2","dataIndex":"task2",hiddencol:true}
写一个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 创建完或是reconfig 的时候调用这个方法，问题解决。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] 实战之Grid, Tree Gird 动态添加列

网站导航