[Ext JS 4] 实战之Grid, Tree Gird编辑| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

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

本篇这里以稍微复杂一点的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 替换成这种输入框。 看上去不错。

但是如果需要的是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'                 };             }         }

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

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

网站导航