资源描述：
《extjs教程 第六章 editor grids(可编辑表格)》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、EditorGrids（可编辑表格）在之前的一章中我们学习了如何在结构化的表格中显示用户可操作的数据。但是，这种表格有一个最大的限制，那就是用户无法自己编辑表格中的数据。幸运的是，Ext提供了EditorGridPanel这一控件，它支持用户对表格进行编辑——我们现在就对这一控件进行学习。它的工作形式类似于Excel，允许用户在点击单元格后进行数据的编辑操作。在这章里，我们将会学到：·为用户提供连接到datastore的可编辑表格；·把编辑后的数据发给服务器，允许用户通过ExtJS的editorgrid更新
2、服务器端的数据；·通过编码操控grid并对事件做出相应；·教给你一些高级的格式化小窍门并且让您建立更加强大的editorgrid。但是，首先，我们要看看可以用可编辑表格能够做什么事情。我们能用可编辑表格做什么？EditorGridPanel和我们之前使用到的表单（form）很相似。实际上，editorgird使用了和form中完全一样的表单字段。通过使用表单字段来实现对grid单元格进行编辑，我们可以充分利用表单字段提供的同样的功能。包括输入约束以及数值验证等。把它和Ext的GridPanel联合起来，就造
3、就了可以满足我们任何需求的漂亮的控件。这个表格中的所有字段都可以被编辑，如同使用表格字段中的textfield（文本字段）、datepicker（日期选择器）、combobox（组合框/下拉菜单）一般。使用可编辑的表格：可编辑和不可编辑表格的区别十一个相当简单的开始的过程。复杂的使我们需要处理编辑状态然后传回服务器。但是一旦你学会了如何去做，这部分也就同样变得相当的简单。让我们先看看如何把第五章开头部分的表格升级到可以编辑电影标题（title）、导演（director）、和标语（tagline）。修改后的代
4、码如下所示：vartitle_edit=newExt.form.TextField();vardirector_edit=newExt.form.TextField({vtype:'name'});vartagline_edit=newExt.form.TextField({maxLength:45});vargrid=newExt.grid.EditorGridPanel({renderTo:document.body,frame:true,title:'MovieDatabase',height:200
5、,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')},{heade
6、r:"Genre",dataIndex:'genre',renderer:genre_name},{header:"Tagline",dataIndex:'tagline',editor:tagline_edit}]});为了让grid可编辑，我们需要做四件事情。它们是：·表格的定义由Ex.grid.GridPanel转化为Ext.grid.EditorGridPanel；·为grid的配置添加clicksToEdit——这个选项不是必须的，默认双击触发编辑；·为每列建立一个表单字段用来编辑；·通过edit
7、or配置把表单字段传递给columnmodel。editor可以是ExtJS中的任何表单字段，或者是你自定义的字段。我们先从建立文本字段编辑电影标题开始。vartitle_edit=newExt.form.TextField();然后，我们利用editor配置向columnmodel添加表单字段：{header:"Title",dataIndex:'title',editor:title_edit}接下来把GridPanel组件改为EditorGridPanel，然后添加clicksToEditor配置：v
8、argrid=newExt.grid.EditorGridPanel({renderTo:document.body,frame:true,title:'MovieDatabase',height:200,width:520,clickstoEdit:1,//removedextracodeforclarity})通过进行这些改变，静态的表格就变为了可编辑的表格，我们可以通过点击任何建立了editor的字段来进行
