ext2.0中EditorGridPanel （8）

EditorGridPanel

ExtJS 中的可编辑表格由类Ext.grid.EditorGridPanel 表示，xtype 为editorgrid，和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});
});

为了能编辑“性别”及“出生日期”列，同样只需要在定义该列的时候指定editor 即可。由于出生日期是日期类型，因此我们可以使用日期编辑器来编辑，“性别”一列的数据不应该让

用户直接输入，而应该是通过下拉框进行选择。日期编辑器可以直接使用Ext.form.DateField组件，下拉选择框编辑器可以使用Ext.form.ComboBox 组件，下面是实现对性别及

出生日期等列信息编辑的代码：

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",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是一个传统的<select>框，我们需要在html 页面中直接定义，代码如下：

 <select id="sexList" name="sexList">
<option>男</option>
<option>女</option>
</select>

ComboBox的其他重要参数

1.valueField:"valuefield"//value值字段
2.displayField："field" //显示文本字段
3.editable：false//false则不可编辑，默认为true
4.triggerAction:"all"//请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name，请一定要注意
6.typeAhead:true,//延时查询，与下面的参数配合
7.typeAheadDelay:3000,//默认250

ext2.0中EditorGridPanel （8）相关推荐

Ext2.0布局类初探
Ext2.0正式版虽然还没出来,但是官网上的例程还是令人兴奋不已.内存泄漏的问题应该是解决了,布局类更新了,增加了新的东西,grid的功能更加强大,tabs也增加了循环按钮,还增加了类似delphi ...
Ext2.0框架的Grid使用介绍(转)
Ext2.0框架的Grid使用介绍最近空闲时间在学习Ext2.0框架,只有一个字的感叹"强",我从未想到JS代码能够写出这么绚丽的Web页面出来,以前看到YUI,惊若天人,如今 ...
Ext2.0 form使用实例
Ext2.0的form不单增加了时间输入控件.隐藏输入控件,还修改了创建方法,通过formpanel代替了原来form,column也根据新的布局定义更新了定义方式.总体来说,定义一个form更简单便 ...
关于ext2.0基本引入说明引入过多开发环境效验太多老火
1.1 Ext版本变迁 * Ext1.0发布于2007年2月,Ext正式从YUI社区中独立出来,不再仅仅支持YUI,而是提供了ext-base.prototype.jquery和YUI4种底层实现.这 ...
usb3.0 u盘安装 linux,在16G USB3.0中安装ubuntu10.10成功！U盘功能可用
折腾了快两天,终于成功的将ubuntu装入U盘,同时能够保持U盘功能,激动ing... 感兴趣的同学可以查看附件.(ps:不会传,现把全文内容附上,说不上原创,不过集合了网上很多的资源,自己稍有发挥. ...
Ext2.0教程一：Ext介绍以及 ext页面布局
学习ext有一段时间了,也开发了几个项目,抽点时间做个总结,刚好公司让我做个Ext培训,于是随便写个Ext教程. Ext介绍 Ext是一个很不错的Ajax框架,可以用来开发带有华丽外观的胖客户端应用, ...
as3.0中如何阻止事件冒泡?
as3.0中的事件冒泡机制有时候会很烦人,比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后,如果两个Sprite都注册了Mo ...
ATS 5.3.0中开启最高级别的缓存调试信息
近来在pptv,letv之类的站点响应中看到via头中有非常详细的缓存信息,我研究了一下,原来是ATS默认就支持的,以ATS 5.3.0中为例,修改records.config中的如下配置项: CON ...
ATS 5.3.0中利用grep得到纯净的配置文件
ATS 5.3.0中的配置文件通常会标有详细的注释,但是我们有时候需要纯净的配置文件,特别是在线上部署的配置文件,不需要这么详细的注释.下面是处理过程. cat records.config | gr ...
在ASP.NET 2.0中使用样式、主题和皮肤
ASP.NET 2.0的主题和皮肤特性使你能够把样式和布局信息存放到一组独立的文件中,总称为主题(Theme).接下来我们可以把这个主题应用到任何站点,用于改变该站点内的页面和控件的外观和感觉.通过改 ...

ext2.0中EditorGridPanel （8）

ext2.0中EditorGridPanel （8）相关推荐

最新文章

热门文章