(十一)可編輯表格EditorGridPanel

(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>