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






你可能感兴趣的:([Ext JS 4] 实战之Grid, Tree Gird编辑Cell)