我們依然拿舊版對比一下。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與后臺的交互，寫了有點慢，見諒。

轉載于:https://www.cnblogs.com/luyingxue/archive/2011/06/01/2065316.html

總結

以上是生活随笔為你收集整理的Ext4核心组件Grid的变化及学习（3）：可编辑的grid的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。