ExtJS之可编辑表格EditorGridPannel

使用EditorGridPannel可以对表格的数据进行编辑，ExtJS中的可编辑表格由类Ext.grid.EditorGridPannel表示。

xtype为editorgrid.使用EditorGridPannel与使用普通的GridPannel的方式一样。区别在定义列信息的时候，可以指定某一列使用的编辑就可以。

Ext.onReady(function(){

      var data=[{id：1，

                    name:"小王",

                    email:"xiaowang@163.com",

                    sex:"男",

                     bornData:"1987-1-2"},

                    {id：1，

                    name:"小李",

                    email:"xiaoli@163.com",

                    sex:"男",

                     bornData:"1987-1-2"},

                    ];

                    var store=new Ext.data.JosnStore({

                    data:data;

                    field:["id","name","sex","email",{name:"bornData",type:"data",dataFormat:"Y-n-j"}]

                    });

                   var colIM=new Ext.gird.ColumnModel([{

                                header:"姓名",

                                dataIndex:"name",

                                sortable:true,

                                editor:new Ext.form.TextField()},

                                {header:"性别",

                                 dataIndex:"sex"},

                                {header:"出生日期",

                                  dataIndex:"bornData",

                                  width:120,

                                  render:Ext.util.Format.dataRender("Y年m月d日")},

                                 {header:"电子邮件",

                                   dataIndex:"email",

                                   sortable:true,

                                   editor:new Ext.form.TextField()}

                              ]);

                           var grid=new Ext.grid.EditorGridPannel({

                             renderTo:"hello",

                             title:"学生基本信息管理",

                             height:200,

                             width:600,

                             cm:colM,

                             store:store,

                             autoExpandColumn:3

                   });

               });

对于姓名和电子邮件我们使用editor来定义该列使用的编辑器。使用Ext.form.TextField.

对于性别我们使用下拉选择Ext.form.ComboBox.

使用new Ext.grid.EditorGridPannel()来创建一个可编辑的表格。

下面实现对性别及出生日期的列信息编辑的代码：

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:"bornData",

             width:120,

             renderer:Ext.util.Format.dataRenderer("Y年m月d日"),

             editor:new Ext.form.DataField({format:"Y年m月d日"})},

           {header:"电子邮件",

            dataIndex:"email",

            sortable:true,

            editor:new Ext.form.TextField()}

 ]);

var gird=new Ext.grid.EditorGridPannel({

     renderTo:"hello",

     title:"学生基本信息管理",

      height:200,

      widtn:600,

      cm:colM,

      store:store,

      autoExpandColumn:3,

      clicksToEdit:1

       });

我们在定义EditorGridPannel的时候。增加一个属性“clicksToEdit:1”,表示点击一次单元格即触发编辑。默认情况下该值为2.为了给ComboBox中填充数据，我们使用设置了该组件的transform配置属性值为sexList,sexList是一个传统的<select>框。

html页面 代码：

<select>

<option>男</option>

<option>女</option>

</select>

 如何保存编辑后的数据呢？

使用afteredit事件,当对一个单元格编辑完以后，就会触发afteredit事件。

this.grid.on("afteredit",this.afteredit,this);

.....

afterEdit:function(obj){

var r=obj.record;

var id=r.get("id");

var name=r.get("name");

var c=this.record2obj(r);

var tree=this.tree;

var node=tree.getSelectionModel().getSelectNode();

if(node&&node.id="root")c.parentId=node.id;

if(id=="-1"&&name!=""){

topicCategroyService.addTopicCategory(c,function(id){

if(id)r.set("id",id);

if(!node)node=tree.root;

 node.appendChild(new Ext.tree.TreeNode({

id：id,

 text:c.name,

leaf:true

}));

node.getUI().removeClass("x-tree-node-leaf");

node.getUI().addClass("x-tree-node-expanded");

node.expand();

});

}

else if(name!="")

{topicCategoryService.updateTopicCategory(r.get("id"),c,function(ret){

if(ret)tree.getNodeById(r.get("id")).setText(c.name);

});

}

}