磨刀不误砍柴工：Ext4核心组件Grid的变化及学习（3）：可编辑的grid

我们依然拿旧版对比一下。Ext 3里面要编辑Grid单元格，就必须制定EditorGrid类。通过继承方式可能不太灵活，于是Ext 4就否决了继承的方式，而是采用“插件化”的方式。通过Ext JS4的Editing插件可以自由绑定到任意的Grid的实例，对于全体任何类型的Grid均可使用。于是乎，此举又为提高“灵活性（flexibility）”添泼了一抹浓彩。此外，对于Ext 3中很受大家所欢迎的一款扩展：RowEditor，在这次发布我们也将RowEditor正式加入的Ext 4包中去，成为标准类库的一员。（引自官方说明）

4系的编辑模式和3系完全不同，彻底抛弃EditorGrid类，改为使用插件支持编辑。今天，使用direct技术说明grid是如何与后台进行数据联系的。并举了几个实际中经常应用的例子：下拉框编辑、下拉框树形选择，并介绍了几种主从表编辑模式，说明各模式优缺点以供选择。

一、预备知识：grid的选择模式

grid有两种编辑模式：行编辑和单元格编辑，相应的有两种选择模式与其配合：行选择和单元格选择。默认是行选择，可以通过selType: 'cellmodel'改变。效果区别如下：

行选择

列选择

 

二、编辑模式的设置

两种编辑模式通过实例化Ext.grid.plugin.CellEditing或者Ext.grid.plugin.RowEditing进行设定，注意要与相应的选择模式配合。每个列使用的编辑方法通过field参数指定。field为Ext.form.field.Field的实例，使用xtype设定类别，可以为text、number、combobox等等，具体设置参考各类的api。不设定field则该列不能修改。

Ext.grid.plugin.CellEditing通常只设置clicksToEdit一个属性，1为单击开启修改模式，2为双击。Ext.grid.plugin.RowEditing多一个autoCancel设置，为true的话点击其他行就会自动取消上一个行的编辑并丢弃结果，默认为true，我经常设置为false让用户自己点，不会点错了丢数据。

1、单元格编辑

Ext.create( ' Ext.grid.Panel ' , { title: ' Simpsons ' , store: new simpsonsStore(), columns: [ {header: ' Name ' , dataIndex: ' name ' , field: ' textfield ' }, {header: ' Email ' , dataIndex: ' email ' , flex: 1 , field:{ xtype: ' textfield ' , allowBlank: false } }, {header: ' Phone ' , dataIndex: ' phone ' } ], selType: ' cellmodel ' , plugins: [ Ext.create( ' Ext.grid.plugin.CellEditing ' , { clicksToEdit: 1 }) ], height: 200 , width: 400 , renderTo: Ext.getBody()});

2、行编辑

Ext.create( ' Ext.grid.Panel ' , { title: ' Simpsons ' , store: new simpsonsStore(), columns: [ {header: ' Name ' , dataIndex: ' name ' , field: ' textfield ' }, {header: ' Email ' , dataIndex: ' email ' , flex: 1 , field:{ xtype: ' textfield ' , allowBlank: false } }, {header: ' Phone ' , dataIndex: ' phone ' } ], plugins: [ Ext.create( ' Ext.grid.plugin.RowEditing ' , { clicksToEdit: 1 }) ], height: 200 , width: 400 , renderTo: Ext.getBody()});

遇到一点问题，起床后再写下grid与后台的交互，写了有点慢，见谅。