[Ext JS 4] 实战之Grid, Tree Gird编辑Cell

前言

本篇这里以稍微复杂一点的Tree Grid 来介绍.

在写编辑grid 之， 先来看一下 grid 的 selType 的配置。

先给一个简单的Tree grid 的例子：

Ext.onReady(function(){
	var treeStore = Ext.create('Ext.data.TreeStore', {
		  fields: ['id','name','sex','age'],
	      root:{	    	    
	            "children":[{id:'001',name:'shu',sex:'',age:'',expanded: true,
                            "children":	[{id:'001_1',name:'liu.bei',sex:'male',age:'50'},
                      	                 {id:'001_2',name:'guan.yu',sex:'male',age:'49'},
                      	                 {id:'001_3',name:'zhang.fei',sex:'male',age:'48'}]
	            }] 
	      }
	});	  
	var gridCols = [{xtype: 'treecolumn',text:'ID',dataIndex:'id'},
	                {text:'Name',dataIndex:'name'},
	                {text:'Sex',dataIndex:'sex'},
	                {text:'Age',dataIndex:'age'}];
	
	var treeGrid = Ext.create('Ext.tree.Panel',{
		title: 'Three KingDom',		
		rootVisible: false,
		collapsible: true,
		store: treeStore,
		columns: gridCols,
		renderTo: Ext.getBody()
	});
});

默认情况下， 点击的时候是整行选取。

可以通过配置selType 进行配置， setType 配置的是 Ext.selection包下的Select Model 的 xtype.

可以配置：

1. rowmodel.  行选取， 默认的方式， 如果没有设置selType的话使用这个。

2. cellmodel。 单元格选取。

3. checkboxmodel。 checkbox 选取， 配置这个的话，会在grid 前加一列 check box 列

4. treemodel。

Cell 编辑模式

好了， 进入正题。对grid 进行编辑。

要对grid 进行编辑，需要以下两个步骤：

1. 给grid 添加edit 的 plugin

	var cellEditPlugin = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });
	var treeGrid = Ext.create('Ext.tree.Panel',{
		title: 'Three KingDom',		
		rootVisible: false,
		collapsible: true,
		store: treeStore,
		columns: gridCols,
		plugins: [cellEditPlugin],
		renderTo: Ext.getBody()
	});

clicksToEdit :  1 是单击，  2 是双击

2. columns 中需要编辑的列添加 editor

{text:'Name',dataIndex:'name',editor:{xtype:'textfield'}},

xtype 是编辑状态的组件， 是简单文本框，还是下拉单，或是其他的

Row 编辑模式

有了以上 cell 模式， Row 模式就简单了。

只是plugin 换成RowEditing 就可以了

	var rowEditPlugin = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 2
    })

而且这两种方式是可以并存的， 全部添加到grid 的plugins 的配置中就可以了。

全部编辑

不管是在row 或是cell的编辑模式下， 一次只能操作一行或一个单元格。

要编辑下一个， 当前的这个就会回到非编辑状态。

也就是， 看起来，只构造了一个editor 的组件, 大家轮着使用。

可是问题是， 如果有eidt all 这个按钮的话，点击之后， 所有可编辑的cell 全部置为编辑状态，使用现有的配置目前就无法达到了。

在 Ext 3 之前的版本， Ext js 的开发者有开发一个插件解决这个问题：

http://www.sencha.com/forum/showthread.php?79232-EditableGrid-Shows-editors-for-all-cells

但是，也特别提出了，如果grid 的数据量很大的话， 这种方式的性能就不行了。

想想也是， 每个edit栏位都会新建一个复杂的组件， 性能肯定会受影响。

问题到这并没有解决， 那个插件只是在Ext 3 （或者以下）可以使用， 目前Ext 已经是 4 版本了。

Extjs 4 中并没有直接解决方法， 升级那个插件应该也挺费时的。

另外一种解法是在 配置col 的 render :

 renderer:function(value, metadata,record){}

在列显示之前， 把value 替换成<input >这种输入框。 看上去不错。

但是如果需要的是commobox  的话呢，

1. renderer 只能返回字符串， 不能返回组件

2. field 组件本身也没有直接转成html 的方法。

3  自行组成 Ext js 的 commobox 的html 看上去也挺麻烦。

不过思路上还是要朝这个方向前进。 幸运的是已经有人把这个扩展完成了（在ext js 4之上）

http://skirtlesden.com/ux/component-column

使用方式很简单， 现在两个js 文件

1.ctemplate.js

http://skirtlesden.com/ux/ctemplate

2. component.js

http://skirtlesden.com/ux/component-column

导入后， 如下方式定义 col

{ 
            ... 
            dataIndex: 'status', 
            xtype: 'componentcolumn', 
 
            renderer: function(status) { 
                return { 
                    ... 
                    store: ['Available', 'Away', 'Busy', 'Offline'], 
                    value: status, 
                    xtype: 'combobox' 
                }; 
            } 
        }