ExtJS2.0实用简明教程——可编辑表格EditorGridPanel
可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑,ExtJS中的可编辑表格由类Ext.grid.EditorGridPanel表示,xtype为editorgrid。使用EditorGridPanel与使用普通的GridPanel方式一样,区别只是在定义列信息的时候,可以指定某一列使用的编辑即可,下面来看一个简单的示例。
Ext.onReady(function(){ var data=[{id:1, name:'小王', email:'xiaowang@easyjf.com', sex:'男', bornDate:'1991-4-4'}, {id:1, name:'小李', email:'xiaoli@easyjf.com', sex:'男', bornDate:'1992-5-6'}, {id:1, name:'小兰', email:'xiaoxiao@easyjf.com', sex:'女', bornDate:'1993-3-7'} ]; var store=new Ext.data.JsonStore({ data:data, fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}] }); var colM=new Ext.grid.ColumnModel([{ header:"姓名", dataIndex:"name", sortable:true, editor:new Ext.form.TextField()}, {header:"性别", dataIndex:"sex" }, {header:"出生日期", dataIndex:"bornDate", width:120, renderer:Ext.util.Format.dateRenderer('Y年m月d日')}, {header:"电子邮件", dataIndex:"email", sortable:true, editor:new Ext.form.TextField()} ]); var grid = new Ext.grid.EditorGridPanel({ renderTo:"hello", title:"学生基本信息管理", height:200, width:600, cm:colM, store:store, autoExpandColumn:3 }); });
上面的程序首先定义了一个包含学生信息的对象数组,然后创建了一个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([{ header:"姓名", dataIndex:"name", sortable:true, editor:new Ext.form.TextField()}, {header:"性别", dataIndex:"sex", editor:new Ext.form.ComboBox({transform:"sexList", triggerAction: 'all', lazyRender:true}) }, {header:"出生日期", dataIndex:"bornDate", width:120, renderer:Ext.util.Format.dateRenderer('Y年m月d日'), editor:new Ext.form.DateField({format:'Y年m月d日'})}, {header:"电子邮件", dataIndex:"email", sortable:true, editor:new Ext.form.TextField()} ]); var grid = new Ext.grid.EditorGridPanel({ renderTo:"hello", title:"学生基本信息管理", height:200, width:600, cm:colM, store:store, autoExpandColumn:3, clicksToEdit:1 });
注意在定义EditorGridPanel的时候,我们增加了一个属性“clicksToEdit:1”,表示点击一次单元格即触发编辑,因为默认情况下该值为2,需要双击单元格才能编辑。为了给ComboBox中填充数据,我们使用设置了该组件的transform配置属性值为sexList,sexList是一个传统的
- 男
- 女
执行上面的程序,我们可以得到一个能对表格中所有数据进行编辑的表格了。点击上面的“性别”一列的单元格时,会出现一个下拉选择框,点击“出生日期”一列的单元格时,会出现一个日期数据选择框,如图xxxx所示:
(编辑性别列中的数据)
(编辑出生日期列中的数据)
那么如何保存编辑后的数据呢?答案是直接使用afteredit事件。当对一个单元格进行编辑完之后,就会触发afteredit事件,可以通过该事件处理函数来处理单元格的信息编辑。比如在http://wlr.easyjf.com这个单用户blog示例中,当我们编辑一个日志目录的时候,需要把编辑后的数据保存到服务器,代码如下:
this.grid.on("afteredit",this.afterEdit,this); … afterEdit:function(obj){ var r=obj.record; var id=r.get("id"); var name=r.get("name"); var c=this.record2obj(r); var tree=this.tree; var node=tree.getSelectionModel().getSelectedNode(); if(node && node.id!="root")c.parentId=node.id; if(id=="-1" && name!=""){ topicCategoryService.addTopicCategory(c,function(id){ if(id)r.set("id",id); if(!node)node=tree.root; node.appendChild(new Ext.tree.TreeNode({ id:id, text:c.name, leaf:true })); node.getUI().removeClass('x-tree-node-leaf'); node.getUI().addClass('x-tree-node-expanded'); node.expand(); }); } else if(name!="") { topicCategoryService.updateTopicCategory(r.get("id"),c,function(ret){ if(ret)tree.getNodeById(r.get("id")).setText(c.name); }); } }
关于可编辑表格控件的详细说明,请参考wlr.easyjf.com中的VIP文档《ExtJS可编辑表格EditorGridPanel详解》。
ExtJS2.0实用简明教程——可编辑表格EditorGridPanel相关推荐
- ExtJS2.0实用简明教程 - Column列布局
Column列布局由Ext.layout.ColumnLayout类定义,名称为column.列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth ...
- ExtJS2.0实用简明教程 - Form布局
Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用. 看下面的 ...
- Python 学习入门(0)—— 简明教程
朋友问我怎么能快速地掌握Python. 我想Python包含的内容很多,加上各种标准库,拓展库,乱花渐欲迷人眼,就想写一个快速的Python教程,一方面 保持言语的简洁,另一方面循序渐进,尽量让没有背 ...
- linux系统sql语句报错_linux之SQL语句简明教程---CREATE VIEW
视观表 (View) 可以被当作是虚拟表格.它跟表格的不同是,表格中有实际储存资料,而视观表是建立在表格之上的一个架构,它本身并不实际储存资料. 建立一个视观表的语法如下: CREATE VIEW & ...
- 高等学校计算机规划教程,高等学校计算机应用规划教材:计算机组成原理简明教程...
高等学校计算机应用规划教材:计算机组成原理简明教程 语音 编辑 锁定 讨论 上传视频 <高等学校计算机应用规划教材计算机组成原理简明教程>是2009年清华大学出版社出版的图书,作者是石磊. ...
- HTML5简明教程系列之HTML5 表格与表单(二)
HTML的第二弹也来了,最近高产似母猪,状态也不错,代码来源为实验课.本期主要内容为:HTML表格与DIV应用.HTML表单.上期基础部分的传送门: HTML5简明教程系列之HTML5基础(一)_Th ...
- wps html编辑表格,手机wps中怎么编辑表格图文教程
我们可以在手机版本的wps中对表格进行编辑,对于新手来说可能不知如何操作,下面就让学习啦小编告诉你如何在手机wps中编辑表格 的方法. 手机wps中编辑表格的方法 首先,下载并安装Android WP ...
- 《Adobe Illustrator CS5中文版经典教程》—第0课0.15节创建和编辑渐变
本节书摘来自异步社区<Adobe Illustrator CS5中文版经典教程>一书中的第0课0.15节创建和编辑渐变,作者[美]Adobe公司,更多章节内容可以访问云栖社区"异 ...
- 《实变函数简明教程》,第四章:Lebesgue积分,零测集上的任意非负简单函数Lebesgue可积且积分值为0
<实变函数简明教程>,第四章:Lebesgue积分,零测集上的任意非负简单函数Lebesgue可积且积分值为0 待分析命题 证明过程 一点注记 待分析命题 设E⊂RnE\subset ...
- 《实变函数简明教程》,第四章:Lebesgue积分,零测集上的任意非负实值函数Lebesgue可积且积分值为0
<实变函数简明教程>,第四章:Lebesgue积分,零测集上的任意非负实值函数Lebesgue可积且积分值为0 待分析命题 证明过程 待分析命题 设E⊂RnE\subset {{\ma ...
最新文章
- C# + ArcEngine 常用方法(不定时更新)
- 5107LiveChatCode
- 蓝桥分酒java_[蓝桥杯][java]海盗分酒
- 图像处理(二十一)基于数据驱动的人脸卡通动画生成-Siggraph Asia 2014
- 直播预告 | 高效视频理解模型的设计及ICCV比赛冠军方案解读
- 你提交代码前没有校验?巧用gitHooks解决
- 单片机中通用的类型别名
- api postmain 鉴权_WebAPI常见的鉴权方法,及其适用范围
- VC2005 C++入门记
- 线程锁并不是想象的那样可靠
- 使用Docker镜像部署Coupons淘宝客项目
- 微信购物商城网站定制需要多少钱?电商网站建设开发方案(一)
- 中国大学慕课精品课程《数据库系统原理》
- Vivo手机安装谷歌Play商店,安装服务框架谷歌Google,支持X90,X80,X70,X60,s系列,IQOO
- 移动端避免使用100vh
- 社区计算机义务维修策划书,义务维修电脑策划书.doc
- 可并堆(左高树、左偏树)
- 怎样从Mysql官网下载mysql.tar.gz版本的安装包
- 使用js实现动态小球气泡背景
- java水平线代码_java 绘制直线,跪求源代码???