[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'
};
}
}