上节讲到通过后台数据进行分页，分页工具条还可以放置在顶端，或者上下都有而不影响数据，因为它们都共用一个store

//创建表格 var grid = new Ext.grid.GridPanel({         renderTo:'grid', //渲染位置         autoHeight:true,         store:store,         width:550,         columns:columns, //显示列         bbar:new Ext.PagingToolbar({             pageSize:25, //每页显示几条数据             store:store,              displayInfo:true, //是否显示数据信息             displayMsg:'显示第 {0} 条到 {1} 条记录，一共  {2} 条', //只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据             emptyMsg: "没有记录" //没有数据时显示信息         }),         tbar:new Ext.PagingToolbar({             pageSize:25, //每页显示几条数据             store:store,              displayInfo:true, //是否显示数据信息             displayMsg:'显示第 {0} 条到 {1} 条记录，一共  {2} 条', //只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据             emptyMsg: "没有记录" //没有数据时显示信息         })     });

除了后台传递数据分页，默认的排序外，extjs还可以自定义排序，通过传递数据来进行后台排序。
如果需要对所有数据排序，则需要把排序信息提交到后台，由后台将排序信息组装到SQL里，然后再由后台将处理好的数据返回给前台。这就是前台与后台交互的过程，既然要提交到服务端，便需要将Ext.data.Store的remoteSort属性设置为true，这个属性是指是否允许远程排序，默认值为false。下次排序时就会有变化，不会立即显示出排序结果，而是将后台提交了2个参数，分别是sort和dir。sort表示需要排序的字段，dir表示升序或降序。后台根据这些参数进行处理。

req.getParameter("sort"); //排序字段 req.getParameter("dir"); //升序还是降序

以上知识是对上节的补充，现在开始将这节所学：可编辑表格--EditorGrid
大家使用过Mircrosoft Excel，它的功能强大，用户可随意添加或删除表格中的行和列，而且只保存一此即可。EditorGrid也提供这些功能，可以直接在表格里执行添加、删除、修改和查找等操作，然后一次性保存。此外，还可以动态修改某个单元格，这些单元格我们先暂时不能为空，保存时会进行检测，为空就无法保存，验证信息会给予提示。



以上实现的效果就是本节所要做的效果，现在看代码：

Ext.onReady(function(){     //定义列     var columns = [         {header:'编号',dataIndex:'id',width:50,             editor:{                 allowBlank:true             }}, //sortable:true 可设置是否为该列进行排序         {header:'名称',dataIndex:'name',width:80,                 editor:{                     allowBlank:true                 }},         {header:'描述',dataIndex:'descn',width:112,                     editor:{                         allowBlank:true                     }}       ];     //定义数据     var data =[         ['1','小王','描述01'],         ['2','李四','描述02'],         ['3','张三','描述03'],         ['4','束洋洋','思考者日记网'],         ['5','高飞','描述05']     ];     //转换原始数据为EXT可以显示的数据     var store = new Ext.data.ArrayStore({         data:data,         fields:[            {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置            {name:'name'},            {name:'descn'}         ]     });     //加载数据     store.load();                //创建表格     var grid = new Ext.grid.GridPanel({         renderTo:'grid', //渲染位置         width:550,         autoHeight:true,         store:store,         columns:columns, //显示列         stripeRows:true, //斑马线效果         selType: 'cellmodel',         plugins:[                  Ext.create('Ext.grid.plugin.CellEditing',{                      clicksToEdit:1 //设置单击单元格编辑                  })         ],         tbar:['-',{             text:'添加一行',             handler:function(){                 var p ={                         id:'',                         name:'',                         descn:''                         };                     store.insert(0,p);                 }             },'-',{                 text:'删除一行',                 handler:function(){                     Ext.Msg.confirm('系统提示','确定要删除？',function(btn){                         if(btn=='yes'){                             var sm = grid.getSelectionModel();                             var record = sm.getSelection()[0];                             store.remove(record);                         }                     });                 }         },'-',{             text:'保存',             handler:function(){                 var m = store.getModifiedRecords().slice(0);                 var jsonArray = [];                 Ext.each(m,function(item){                     jsonArray.push(item.data);                 });                 Ext.Ajax.request({                     method:'POST',                     url:'/ExtJs4.2Pro/EditGridServlet',                     success:function(response){                         Ext.Msg.alert('系统提示',response.responseText,function(){                             store.load();                         });                     },                     failure:function(){                         Ext.Msg.alert("错误","与后台联系的时候出了问题。");                     },                     params:'data='+encodeURIComponent(Ext.encode(jsonArray))                 });             }         }]     }); });

这里我们启用了CellEditing插件，其他的部分并没有什么变化。可是看到的结果是，现在可以用TextField的方式随意修改单元格。记得不能让单元格为空，否则无法修改。
默认情况下，需要双击单元格才能激活编辑器，从而进行修改。不过，也可以给表格配置上clicksToEdit:1，这样就可以通过单击单元格激活编辑器，从而进行修改，上面的代码中已经用到了。
TextField不允许输入空值，因为在创建columns时对应的editor设置了allowBlank:false属性。allowBlank:false表示不运行在TextField中输入空值。
上面的示例中用到了数组对象的Slice(start,[end])方法，该方法返回一个新数组，包含了原函数从start到end所指定的元素，但是不包括end元素，比如a.slice(0,3)。如果start为负，则将它作为length+start处理（此处length为数组的长度，比如a.slice(-3,4)，相当于a.slice(2,4)）。如果end为负，就将它作为length+end处理（次数length为数组的长度，比如a.slice(0,-1)。如果省略end，那么slice方法将一直复制到原数组结尾，比如a.slice(1)）。如果省略end，那么slice方法将一直复制到原数组结尾，比如a.slice(1)。如果end出现在start之前，不复制任何元素到新数组中，比如a.slice(4,3)。示例中store.getModifiedRecords().slice(0)的作用就是复制store.getModifiedRecords()，保证store.getModifiedRecords()中的原始数据不受影响。
下面看下后台对输入的数据怎么进行保存的？
输入一行数据



点击保存后


后台代码

@SuppressWarnings("serial") public class EditGridServlet extends HttpServlet {     @Override     protected void doGet(HttpServletRequest req, HttpServletResponse resp)             throws ServletException, IOException {         doPost(req,resp);     }           @Override     protected void doPost(HttpServletRequest req, HttpServletResponse resp)             throws ServletException, IOException {         req.setCharacterEncoding("UTF-8");               String data = req.getParameter("data");         System.out.println(data);               resp.getWriter().print(data);     } }

打印结果：
连载中，请大家持续关注，本文出自我的个人网站