extjs Editor Grids 可编辑的表格.docVIP

  1. 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
  2. 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  3. 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  4. 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  5. 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  6. 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  7. 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
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,

文档评论(0)

df829393 + 关注
实名认证
文档贡献者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档