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

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

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

?

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

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

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

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

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

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