extjs Editor Grids 可编辑的表格.docVIP

Editor Grids（可编辑表格） 在之前的一章中我们学习了如何在结构化的表格中显示用户可操作的数据。但是，这种表格有一个最大的限制，那就是用户无法自己编辑表格中的数据。幸运的是，Ext提供了EditorGridPanel这一控件，它支持用户对表格进行编辑——我们现在就对这一控件进行学习。它的工作形式类似于Excel，允许用户在点击单元格后进行数据的编辑操作。 在这章里，我们将会学到： 为用户提供连接到data store的可编辑表格； 把编辑后的数据发给服务器，允许用户通过ExtJS的editor grid更新服务器端的数据； 通过编码操控grid并对事件做出相应； 教给你一些高级的格式化小窍门并且让您建立更加强大的editor grid。 但是，首先，我们要看看可以用可编辑表格能够做什么事情。 我们能用可编辑表格做什么？ EditorGridPanel和我们之前使用到的表单（form）很相似。实际上，editor gird使用了和form中完全一样的表单字段。通过使用表单字段来实现对grid单元格进行编辑，我们可以充分利用表单字段提供的同样的功能。包括输入约束以及数值验证等。把它和Ext的GridPanel联合起来，就造就了可以满足我们任何需求的漂亮的控件。 这个表格中的所有字段都可以被编辑，如同使用表格字段中的text field（文本字段）、date picker（日期选择器）、combo box（组合框/下拉菜单）一般。 使用可编辑的表格： 可编辑和不可编辑表格的区别十一个相当简单的开始的过程。复杂的使我们需要处理编辑状态然后传回服务器。但是一旦你学会了如何去做，这部分也就同样变得相当的简单。 让我们先看看如何把第五章开头部分的表格升级到可以编辑电影标题（title）、导演（director）、和标语（tagline）。修改后的代码如下所示： var title_edit = new Ext.form.TextField(); var director_edit = new Ext.form.TextField({vtype: name}); var tagline_edit = new Ext.form.TextField({ maxLength: 45 }); var grid = new Ext.grid.EditorGridPanel({ renderTo: document.body, frame:true, title: Movie Database, height:200, width:520, clickstoEdit: 1, store: store, columns: [ {header: Title, dataIndex: title,editor: title_edit}, {header: Director, dataIndex: director,editor: director_edit}, {header: Released, dataIndex: released,renderer: Ext.util.Format.dateRenderer(m/d/Y)}, {header: Genre, dataIndex: genre,renderer: genre_name}, {header: Tagline, dataIndex: tagline,editor: tagline_edit} ] }); 为了让grid可编辑，我们需要做四件事情。它们是： 表格的定义由Ex.grid.GridPanel转化为Ext.grid.EditorGridPanel； 为grid的配置添加clicksToEdit——这个选项不是必须的，默认双击触发编辑； 为每列建立一个表单字段用来编辑； 通过editor配置把表单字段传递给column model。 editor可以是ExtJS中的任何表单字段，或者是你自定义的字段。我们先从建立文本字段编辑电影标题开始。 var title_edit = new Ext.form.TextField(); 然后，我们利用editor配置向column model添加表单字段： {header: Title, dataIndex: title, editor: title_edit} 接下来把GridPanel组件改为EditorGridPanel，然后添加clicksToEditor配置： var grid = new Ext.grid.EditorGridPanel({ renderTo: document.body, frame:true, title: Movie Database, height:200