ext2.0中EditorGridPanel (8)
来源:互联网 发布:linux中竖线 命令 编辑:程序博客网 时间:2024/05/22 05:12
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的EditorGridPanel
- ext2.0中组件简介(2)
- ext2.0中layout布局(6)
- ext2.0中GridPanel(7)
- ext2.0中组件(viewPort)的使用(4)
- ext2.0中Record的使用(9)
- Ext2.0中tab+iframe的配置
- Ext2.0
- Ext2.0 html标签中调用方法function 避免“找不到此方法”(如红色标记)
- ext2.0中组件(panel,tabPanel,button,window)的使用(3)
- ext2.0中组件(window,提示框)的使用(5)
- 在EditorGridPanel中插入一行(经常在增加的时候用到)
- EXT EditorGridPanel 中使用Ext.grid.CheckColumn
- EXT中EditorGridPanel 根据权限使某列不编辑
- Ext2.0实现TabPanel
- Ext2.0学习入门
- ext2.0文件上传
- 【Cocos2d-x游戏引擎开发笔记(6)】触屏事件与多媒体 (转)
- Oracle执行计划详解
- 常见MFC UI界面库
- ListView实现自动滚动
- 三星首届全球开发者大会举行 发布5款工具包
- ext2.0中EditorGridPanel (8)
- 字符串倒序 单词次序不变----
- 算法习题33:字符串匹配(和谐文字)
- javascript 仿百度分页函数
- 50条经典管理心理学定律
- fedora16安装bochs问题解决
- Apache Shiro
- 第一次亲密接触(1)
- Ext.data.XmlReader读取外部文件时提示拒绝访问