(十一)可编辑表格EditorGridPanel

(2) 可编辑表格EditorGridPanel
可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS 中的可编辑表格由类Ext.grid.EditorGridPanel 表示，xtype 为editorgrid。使用EditorGridPanel 与使用普通的GridPanel 方式一样，区别只是在定义列信息的时候，可以指定某一列使用的编辑即可，下面来看一个简单的示例。
Ext.onReady(function(){
 var data=[
  {id:1,name:'小王',email:'[e-mail]',sex:'男',bornDate:'1991-4-4'},
  {id:1,name:'小李',email:'[e-mail]',sex:'男',bornDate:'1992-5-6'},
  {id:1,name:'小兰',email:'[e-mail]',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:'[e-mail]',sex:'男',bornDate:'1991-4-4'},
  {id:1,name:'小李',email:'[e-mail]',sex:'男',bornDate:'1992-5-6'},
  {id:1,name:'小兰',email:'[e-mail]',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:'[e-mail]',sex:'男',bornDate:'1991-4-4'},
   {id:1,name:'小李',email:'[e-mail]',sex:'男',bornDate:'1992-5-6'},
   {id:1,name:'小兰',email:'[e-mail]',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>

评论

2 楼 finally_m 2010-02-08  

谢谢提醒！

1 楼 setfsun2009 2010-02-02  

不知楼主注意没，在火狐下的日期控件有问题！