(2) 可編輯表格EditorGridPanel
可編輯表格是指可以直接在表格的單元格對表格的數據進行編輯，ExtJS 中的可編輯表格由類Ext.grid.EditorGridPanel 表示，xtype 為editorgrid。使用EditorGridPanel 與使用普通的GridPanel 方式一樣，區別只是在定義列信息的時候，可以指定某一列使用的編輯即可，下面來看一個簡單的示例。
Ext.onReady(function(){
?var data=[
??{id:1,name:'小王',email:'xiaowang@yahoo.com',sex:'男',bornDate:'1991-4-4'},
??{id:1,name:'小李',email:'xiaoli@yahoo.com',sex:'男',bornDate:'1992-5-6'},
??{id:1,name:'小蘭',email:'xiaoxiao@yahoo.com',sex:'女',bornDate:'1993-3-7'}
?];
?var store=new Ext.data.JsonStore({
??data:data,
??fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
?});
?var colM=new Ext.grid.ColumnModel([
??{header:"姓名",dataIndex:"name",sortable:true,
???editor:new Ext.form.TextField()},
??{header:"性別",dataIndex:"sex"},
??{header:"出生日期",dataIndex:"bornDate",width:120,
???renderer:Ext.util.Format.dateRenderer('Y年m月d日')},
??{header:"電子郵件",dataIndex:"email",sortable:true,
???editor:new Ext.form.TextField()}
?]);
?var grid = new Ext.grid.EditorGridPanel({
??renderTo:"mydiv",
??title:"學生基本信息管理",
??height:200,
??width:600,
??cm:colM,
??store:store,
??autoExpandColumn:3
?});
});

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

Ext的日期格式說明：
格式?說明 ?例子
d?月里面的日期，2位，不足前面補0 ?01-31
D ?星期里面的每天的縮寫 ?Mon - Sun
j ?月里面的日期，前面不補0 ?1-31
l ?星期的完整寫法?Sunday to Saturday
N ?ISO-8601的星期表示法?1=星期一，7是星期日
S ?英語習慣的月內每天的2位的前綴?st, nd, rd or th.
w ?星期的數字表示 ?0=星期日，6等星期六
Z ?在年內的第幾天，從0開始 ?0-364，閏年是365
W ?ISO-8601格式的，年內的星期數，從星期一開始 ?01-53
F ?月份的完整文字表示?January to December
m ?月份的2位數字表示，不足前面補零 ?01-12
M ?月份的縮寫文字表示 ?Jan to Dec
n ?月份的數字表示，不補零 ?1-12
t ?月份的最大天數?28-31
L ?是否為閏年 ?1是閏年，0則不是
o ?ISO-8601的年份表示，和Y相同，但是如果星期(W)輸入前一年或者后一年，則替換為那個年?1998，2004
Y ?4位的年份表示 ?2008
y ?2位的年份表示?98，08
a ?小寫的上下午表示?am pm
A ?大寫的上下午 ?AM PM
g ?12小時制，不補零?1-12
G ?24小時制，不補零?0-23
h ?12小時制，2位，不足補零?01-12
H ?24小時制，2位,不足補零?00-23
i ?分鐘，2位，不足補零?00-59
s ?秒，2位，不足補零?00-59
u ?毫秒，前面補零 ?001 999

為了能編輯“性別”及“出生日期”列，同樣只需要在定義該列的時候指定editor 即可。由于出生日期是日期類型，因此我們可以使用日期編輯器來編輯，“性別”一列的數據不應該讓用戶直接輸入，而應該是通過下拉框進行選擇。日期編輯器可以直接使用Ext.form.DateField組件，下拉選擇框編輯器可以使用Ext.form.ComboBox 組件，下面是實現對性別及出生日期等列信息編輯的代碼：
Ext.onReady(function(){
?var data=[
??{id:1,name:'小王',email:'xiaowang@yahoo.com',sex:'男',bornDate:'1991-4-4'},
??{id:1,name:'小李',email:'xiaoli@yahoo.com',sex:'男',bornDate:'1992-5-6'},
??{id:1,name:'小蘭',email:'xiaoxiao@yahoo.com',sex:'女',bornDate:'1993-3-7'}
?];
?var store=new Ext.data.JsonStore({
??data:data,
??fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
?});
?var colM=new Ext.grid.ColumnModel([
??{header:"姓名",dataIndex:"name",sortable:true,
???editor:new Ext.form.TextField()},
??{header:"性別",dataIndex:"sex",
???editor:new Ext.form.ComboBox({transform:"sexList",
???triggerAction: 'all',
???lazyRender:true})},
??{header:"出生日期",dataIndex:"bornDate",width:120,
???renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
???editor:new Ext.form.DateField({format:'Y年m月d日'})},
??{header:"電子郵件",dataIndex:"email",sortable:true,
???editor:new Ext.form.TextField()}
?]);
?var grid = new Ext.grid.EditorGridPanel({
??renderTo:"mydiv",
??title:"學生基本信息管理",
??height:200,
??width:600,
??cm:colM,
??store:store,
??autoExpandColumn:3,
??clicksToEdit:1
?});
});

? <div id="mydiv"></div>
?<select id="sexList">
??<option>男</option>
??<option>女</option>
?</select>

注意在定義EditorGridPanel 的時候，我們增加了一個屬性“clicksToEdit:1”，表示點擊一次單元格即觸發編輯，因為默認情況下該值為2，需要雙擊單元格才能編輯。為了給ComboBox 中填充數據，我們使用設置了該組件的transform 配置屬性值為sexList，sexList是一個傳統的<select>框。
執行上面的程序，我們可以得到一個能對表格中所有數據進行編輯的表格了。點擊上面的“性別”一列的單元格時，會出現一個下拉選擇框，點擊“出生日期”一列的單元格時，會出現一個日期數據選擇框。

那么如何保存編輯后的數據呢？答案是直接使用afteredit 事件。當對一個單元格進行編輯完之后，就會觸發afteredit 事件，可以通過該事件處理函數來處理單元格的信息編輯。比如在blog 示例中，當我們編輯一個日志目錄的時候，需要把編輯后的數據保存到服務器。
?? Ext.onReady(function(){
??var data=[
???{id:1,name:'小王',email:'xiaowang@yahoo.com',sex:'男',bornDate:'1991-4-4'},
???{id:1,name:'小李',email:'xiaoli@yahoo.com',sex:'男',bornDate:'1992-5-6'},
???{id:1,name:'小蘭',email:'xiaoxiao@yahoo.com',sex:'女',bornDate:'1993-3-7'}
??];
??var store=new Ext.data.JsonStore({
???data:data,
???fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
??});
??var colM=new Ext.grid.ColumnModel([
???{header:"姓名",dataIndex:"name",sortable:true,
????editor:new Ext.form.TextField()},
???{header:"性別",dataIndex:"sex",
????editor:new Ext.form.ComboBox({transform:"sexList",
????triggerAction: 'all',
????lazyRender:true})},
???{header:"出生日期",dataIndex:"bornDate",width:120,
????renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
????editor:new Ext.form.DateField({format:'Y年m月d日'})},
???{header:"電子郵件",dataIndex:"email",sortable:true,
????editor:new Ext.form.TextField()}
??]);
??var grid = new Ext.grid.EditorGridPanel({
???renderTo:"mydiv",
???title:"學生基本信息管理",
???height:200,
???width:600,
???cm:colM,
???store:store,
???autoExpandColumn:3,
???clicksToEdit:1
??});
??//給可編輯的表格(grid為已定義的表格)添加afteredit事件
??grid.on("afteredit",function(e){
???//當前修改的記錄
???var rec = e.record;
???var name = rec.get("name");
???var sex = rec.get("sex");
???var bornDate = rec.get("bornDate");
???var email = rec.get("email");
???//簡寫方式：Ext.Msg.alert(....);
???Ext.MessageBox.alert(
"修改",name + " " + sex + " "
+ Ext.util.Format.date(bornDate,"Y-n-j") + " " + email);
??})
?});

??? <div id="mydiv"></div>
?<select id="sexList">
??<option>男</option>
??<option>女</option>
?</select>

總結

以上是生活随笔為你收集整理的(十一)可编辑表格EditorGridPanel的全部內容，希望文章能夠幫你解決所遇到的問題。

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