??????? 可編輯表格是指可以直接在表格的單元格對表格的數(shù)據(jù)進行編輯，ExtJS中的可編輯表格由類Ext.grid.EditorGridPanel表 示，xtype為editorgrid。使用EditorGridPanel與使用普通的GridPanel方式一樣，區(qū)別只是在定義列信息的時候，可以 指定某一列使用的編輯即可，下面來看一個簡單的示例。

??????? 上面的程序首先定義了一個包含學生信息的對象數(shù)組，然后創(chuàng)建了一個JsonStore，在創(chuàng)建這個store的時候，指定bornDate列的類型為日期 date類型，并使用dateFormat來指定日期信息的格式為"Y-n-j"，Y代表年，n代表月,j代表日期。定義表格列模型的時候，對于“姓名” 及“電子郵件”列我們使用editor來定義該列使用的編輯器，這里是使用Ext.form.TextField，最后使用new Ext.grid.EditorGridPanel(…)來創(chuàng)建一個可編輯的表格。執(zhí)行上面的程序可以生成一個表格，雙擊表格中的“姓名”、或“電子郵件 ”單元格中的信息可以觸發(fā)單元格的編輯，可以在單元格的文本框中直接編輯表格中的內(nèi)容，修改過的單元格會有特殊的標記，如下圖所示：

??????? 為了能編輯“性別”及“出生日期”列，同樣只需要在定義該列的時候指定editor即可。由于出生日期是日期類型，因此我們可以使用日期編輯器來編輯，“ 性別”一列的數(shù)據(jù)不應該讓用戶直接輸入，而應該是通過下拉框進行選擇。日期編輯器可以直接使用Ext.form.DateField組件，下拉選擇框編輯 器可以使用Ext.form.ComboBox組件，下面是實現(xiàn)對性別及出生日期等列信息編輯的代碼：

?

??????? 注意在定義EditorGridPanel的時候，我們增加了一個屬性“clicksToEdit:1”，表示點擊一次單元格即觸發(fā)編輯，因為默認情況下 該值為2，需要雙擊單元格才能編輯。為了給ComboBox中填充數(shù)據(jù)，我們使用設置了該組件的transform配置屬性值為 sexList，sexList是一個傳統(tǒng)的<select>框，我們需要在html頁面中直接定義，代碼如下：

??????? 執(zhí)行上面的程序，我們可以得到一個能對表格中所有數(shù)據(jù)進行編輯的表格了。點擊上面的“性別”一列的單元格時，會出現(xiàn)一個下拉選擇框，點擊“出生日期”一列的單元格時，會出現(xiàn)一個日期數(shù)據(jù)選擇框，如圖xxxx所示：

(編輯性別列中的數(shù)據(jù))

(編輯出生日期列中的數(shù)據(jù))

??????? 那么如何保存編輯后的數(shù)據(jù)呢？答案是直接使用afteredit事件。當對一個單元格進行編輯完之后，就會觸發(fā)afteredit事件，可以通過該事件處理函數(shù)來處理單元格的信息編輯。比如在http://wlr.easyjf.com這個單用戶blog示例中，當我們編輯一個日志目錄的時候，需要把編輯后的數(shù)據(jù)保存到服務器，代碼如下：

??????? 關(guān)于可編輯表格控件的詳細說明，請參考wlr.easyjf.com中的VIP文檔《ExtJS可編輯表格EditorGridPanel詳解》。