可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑,ExtJS中的可编辑表格由类Ext.grid.EditorGridPanel表 示,xtype为editorgrid。使用EditorGridPanel与使用普通的GridPanel方式一样,区别只是在定义列信息的时候,可以 指定某一列使用的编辑即可,下面来看一个简单的示例。 Ext.onReady(function(){ 上面的程序首先定义了一个包含学生信息的对象数组,然后创建了一个JsonStore,在创建这个store的时候,指定bornDate列的类型为日期 date类型,并使用dateFormat来指定日期信息的格式为"Y-n-j",Y代表年,n代表月,j代表日期。定义表格列模型的时候,对于“姓名” 及“电子邮件”列我们使用editor来定义该列使用的编辑器,这里是使用Ext.form.TextField,最后使用new Ext.grid.EditorGridPanel(…)来创建一个可编辑的表格。执行上面的程序可以生成一个表格,双击表格中的“姓名”、或“电子邮件 ”单元格中的信息可以触发单元格的编辑,可以在单元格的文本框中直接编辑表格中的内容,修改过的单元格会有特殊的标记 为了能编辑“性别”及“出生日期”列,同样只需要在定义该列的时候指定editor即可。由于出生日期是日期类型,因此我们可以使用日期编辑器来编辑,“ 性别”一列的数据不应该让用户直接输入,而应该是通过下拉框进行选择。日期编辑器可以直接使用Ext.form.DateField组件,下拉选择框编辑 器可以使用Ext.form.ComboBox组件,下面是实现对性别及出生日期等列信息编辑的代码: var colM=new Ext.grid.ColumnModel([{ 注意在定义EditorGridPanel的时候,我们增加了一个属性“clicksToEdit:1”,表示点击一次单元格即触发编辑,因为默认情况下 该值为2,需要双击单元格才能编辑。为了给ComboBox中填充数据,我们使用设置了该组件的transform配置属性值为 sexList,sexList是一个传统的<select>框,我们需要在html页面中直接定义,代码如下: <select. id="sexList" name="sexList"> 执行上面的程序,我们可以得到一个能对表格中所有数据进行编辑的表格了。点击上面的“性别”一列的单元格时,会出现一个下拉选择框,点击“出生日期”一列的单元格时,会出现一个日期数据选择框 (编辑出生日期列中的数据) 那么如何保存编辑后的数据呢?答案是直接使用afteredit事件。当对一个单元格进行编辑完之后,就会触发afteredit事件,可以通过该事件处理函数来处理单元格的信息编辑。比如在http://wlr.easyjf.com这个单用户blog示例中,当我们编辑一个日志目录的时候,需要把编辑后的数据保存到服务器,代码如下: this.grid.on("afteredit",this.afterEdit,this);
|
ExtJS2.0 可编辑表格EditorGridPanel
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
jQuery实现可编辑表格
可编辑表格,这个东西听起来挺高大上,其实用jQuery来实现,了解一下思路,就很简单1.事实上是编辑td里面的内容,
可编辑表格 jQuery jquery html -
可编辑表格
Model A B C D 操作 ...
ajax 数据 html javascript 数组 -
android 表格实现 android可编辑表格控件
LayoutManager是RecyclerView的布局管理器,RecyclerView里面每个item的布局都依赖于LayoutManager的实现。Andorid系统给提供了三个LayoutManager布局管理器:LinearLayoutManager(线性布局管理器)、GridLayoutManager(网格布局管理器)、Stagge
android 表格实现 Android RecyclerView LayoutManager 表格