Ext可编辑的表格控件

使用EditorGird，可以直接在表格执行添加、删除、修改和查找等操作，然后一次性保存。可动态修改某个单元格，保存时进行检查，为空无法保存，验证信息给予提示等。

 

14.1制作一个简单的EditorGrid

（1）、在生成Ext.grid.ColumnModel的列时加上editor配置项。

    {

    header : '名称',

    dataIndex : 'name',

    width : 100,

    sortable : true,

    editor:new Ext.Editor(new Ext.form.TextField({

        allowBlank:false //不能为空，为空无法保存

    }))

}

 

（2）、生成Ext.grid.EditorGridPanel，不再是Ext.grid.GridPanel。

    Ext.grid.GridPanel中的配置项在EditorGridPanel中也是可以使用的。

（3）、默认情况下，单击单元格实现编辑，如果要单击编辑，则在EditorGridPanel中将clicksToEdit设置为1即可。

clicksToEdit:1, // 默认是2，双击编辑表格。

效果：

 

14.2添加、删除行

在表格顶部增加一个工具条，包含2个按钮：添加一行和删除选中行。

单击添加按钮时，新加一行到当前页的最后一行。

Toolbar中’-‘是按钮与按钮之间的分隔符。

代码如下：

tbar:new Ext.Toolbar(['-',

    {

        text:"添加一行",

        handler:function() {

            // 定义一个记录集，相当于一个类。Record中不为空的字段在新增后就会显示Record中给的值。

            var p =new Ext.data.Record({

                id:Ext.id(),//ext自动生成唯一值

                name:"",

                sex:"",

                birthday:"2000-10-10",

                description:"default description"

            });

            //停止编辑

            grid.stopEditing();

            //插入到一页的最后一行

            store.insert(PAGE_SIZE,p);

            //提示你编辑，输入内容

            grid.startEditing(PAGE_SIZE,3);

        }

    },

    '-',{

        text:"删除选择的行",

        handler:function() {

            Ext.Msg.confirm("提示","确认要删除吗？",function(res) {

                if (res =="yes") {

                    var sm =grid.getSelectionModel();

                    //获取选中的行

                    var row =sm.getSelected();

                    //删除这一行

                    store.remove(row);

                }

            });

        }

    }

])

 

效果：

那，现在单击“添加一行”，

可以看到，在最后一行追加了一行，且自动将光标切换到“名称”这一列提示我们输入数据。编号、生日、描述这3个列都有了值，就是我们定义Record是赋的值。

 

单击删除按钮，会提示是否删除，单击“yes”，则选中的行就被从表格中删除了。

 

 

14.3保存修改结果

使用上面介绍的添加行的方式，通过store.modified可以获取新增的行。下面在表格顶部添加一个按钮，保存修改结果。

代码：

'-',{

    text:"保存",

    handler:function() {

        //获取修改的数据

        var m =store.modified.slice(0);

        var jsonArray =[];

       

        Ext.each(m,function(item) {

            jsonArray.push(item.data);

        });

       

        // Ajax请求后台，保存数据

        Ext.Ajax.request({

               url:'/myExt2.3/SaveEditorGridServlet',           

success: function(req) {

                   alert(req.responseText);

                   Ext.Msg.show({

                       title:"提示",

                       msg:data,

                       buttons:Ext.Msg.OK,

                       icons:Ext.MessageBox.INFO

                   });

              },

              failure: function(data) {

                   Ext.Msg.show({

                       title:"提示",

                       msg:data,

                       buttons:Ext.Msg.OK,

                       icons:Ext.MessageBox.ERROR

                  });

              },

              headers: {

                   'my-header': 'foo'

              },

              params: {

                   data:decodeURIComponent(Ext.encode(jsonArray))

              }

            });

    }

}

 

后台获得的数据是Json格式，形如：

[

{"id":"ext-gen130","name":"","sex":"df","birthday":"2000-10-10","description":"defaultdescription"},

{"id":"ext-gen154","name":"上德律风","sex":"男","birthday":"2000-10-10","description":"defaultdescription"}

]

这是我新增2行的结果，新增后要修改，不然传递给后台的json数据就是[]。

在Ajax请求完毕后，后台可以返回任意格式，在页面进行解析。

先通过responseText来获取返回的结果。如果是文本就直接使用；如果是Json格式，就使用Ext.decode()函数将Json格式字符串转成Json对象，再进行使用。