磨刀不误砍柴工：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与后台的交互，写了有点慢，见谅。