ExtJs4开发动态编辑的表格

来源：互联网发布：如何释放被占用的端口编辑：程序博客网时间：2024/06/05 06:53
开发动态编辑的表格（1）Ext JS在Ext.grid.plugin包下提供了允许编辑表格的插件功能，该包下提供了如下3个与表格编辑有关的类。Ext.grid.plugin.Editing：为表格增加编辑功能的基类。Ext.grid.plugin.RowEditing：为表格行增加编辑功能的插件类。Ext.grid.plugin.CellEditing：为单元格增加编辑功能的插件类。当使用Ext.grid.plugin.RowEditing、Ext.grid.plugin.CellEditing为表格增加编辑时，可以指定如下4种常见的事件处理函数。beforeedit：在编辑之前触发的事件处理函数。canceledit：取消编辑时触发的事件处理函数。edit：编辑完成时触发的事件处理函数。validateedit：指定编辑完成之后，值被保存到Store之前触发该事件处理函数。如果该事件处理函数返回false，将可以取消编辑。为该表格增加动态编辑功能，需要完成如下两步：使用Ext.grid.Panel定义表格时，可通过plugins选项为表格单击单元格编辑插件或行编辑插件。使用Ext.grid.Panel定义表格，并且使用fields选项定义表格列时，为需要编辑的单元格通过editor选项指定单元格编辑器。如下示例开发了一个允许异步、动态编辑表格数据的页面。程序清单：codes\06\6.8\Ext.grid\Ext.grid.Panel_edit.html<body> <script type="text/javascript"> Ext.onReady(function(){      Ext.define('Book', {          extend: 'Ext.data.Model',          fields: [              {name: 'id' , type: 'int'},              {name: 'name', type: 'string'},              {name: 'author', type: 'string'},              {name: 'price', type: 'float'},          ]      });      // 创建一个Ext.data.Store对象      var bookStore = Ext.create('Ext.data.Store',       {          // 指定使用Book Model管理记录          model: 'Book',          // 使用proxy指定加载远程数据          proxy:           {              type: 'ajax',              url: 'getAllBooks',// 向该URL发送Ajax请求              reader: { // 使用Ext.data.reader.Json读取服务器数据                  type: 'json',                  root: 'data' // 直接读取服务器响应的data数据              },          },          autoLoad:true// 自动加载服务器数据      });      var grid = Ext.create('Ext.grid.Panel', {          title: '查看服务器端图书',          width: 550, // 指定表单宽度          renderTo: Ext.getBody(),          // 定义该表格包含的所有数据列          columns: [              { text: '图书ID', dataIndex: 'id' , flex: 1 }, // 第1个数据列               // 第2个数据列              { text: '书名', dataIndex: 'name' , flex: 1,                  editor: {xtype: 'textfield', allowPattern: false}},               // 第3个数据列              { text: '作者', dataIndex: 'author', flex: 1,                  editor: {xtype: 'textfield', allowPattern: false}},              // 第4个数据列              { text: '价格', dataIndex: 'price' , flex: 1,                  editor: {xtype: 'numberfield', allowPattern: false}},          ],          selType: 'rowmodel', // 指定选择模式：行选择模式          plugins:           [              // 增加表格行编辑插件              {                  ptype: 'rowediting',                  clicksToEdit: 1              }          ],          store: bookStore      });      // 当表格编辑完成后，触发该事件处理函数      grid.on('edit', function(editor, e)      {          Ext.Ajax.request({              url: 'updateBook', // 向此处发送Ajax请求              method: 'POST',              params: { // 指定请求参数                  id: e.newValues.id,                  name: e.newValues.name,                  author: e.newValues.author,                  price: e.newValues.price,              }, // 指定服务器响应完成的回调函数              success: function(response){                  alert(Ext.JSON.decode(response.responseText).tip);                  e.record.commit();              }          });      });  });  </script> </body>
0 0