ext_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的其他重要参数
.valueField:"valuefield"//value值字段
.displayField:"field" //显示文本字段
.editable:false//false则不可编辑,默认为true
.triggerAction:"all"//请设置为"all",否则默认为"query"的情况下,你选择某个值后,再此下拉时,只出现匹配选项,如果设为"all"的话,每次下拉均显示全部选项
.hiddenName:string //真正提交时此combo的name,请一定要注意
.typeAhead:true,//延时查询,与下面的参数配合
.typeAheadDelay:,//默认250
ext_EditorGridPanel (8)的更多相关文章
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- ASP.NET Core 之 Identity 入门(一)
前言 在 ASP.NET Core 中,仍然沿用了 ASP.NET里面的 Identity 组件库,负责对用户的身份进行认证,总体来说的话,没有MVC 5 里面那么复杂,因为在MVC 5里面引入了OW ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- Online Judge(OJ)搭建(第一版)
搭建 OJ 需要的知识(重要性排序): Java SE(Basic Knowledge, String, FileWriter, JavaCompiler, URLClassLoader, Secur ...
- 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑
阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...
- 如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成
阅读目录 前言 建模 实现 结语 一.前言 前面几篇已经实现了一个基本的购买+售价计算的过程,这次再让售价丰满一些,增加一个会员价的概念.会员价在现在的主流电商中,是一个不大常见的模式,其带来的问题是 ...
- 【.net 深呼吸】细说CodeDom(5):类型成员
前文中,老周已经厚着脸皮介绍了类型的声明,类型里面包含的自然就是类型成员了,故,顺着这个思路,今天咱们就了解一下如何向类型添加成员. 咱们都知道,常见的类型成员,比如字段.属性.方法.事件.表示代码成 ...
- 【.net 深呼吸】细说CodeDom(4):类型定义
上一篇文章中说了命名空间,你猜猜接下来该说啥.是了,命名空间下面就是类型,知道了如何生成命名空间的定义代码,之后就该学会如何声明类型了. CLR的类型通常有这么几种:类.接口.结构.枚举.委托.是这么 ...
随机推荐
- 在PC上收发短信--Pidgin短信(Linux Pidgin插件)
Pidgin短信是Pidgin/empathy的一个插件.当手机收到短信进,电脑上面有提示:可以在电脑上发手机短信.让你时刻保持在电脑屏幕上,也不会错过短信.目前只支持安卓,wifi连接方式. 功能 ...
- [Everyday Mathematics]20150208
对 $f\in C^2(\bbR)$ 适合 $$\bex \vlm{|x|}f(x)=0, \eex$$ 试证: $$\bex \int_{\bbR} |f'|^p\rd x \leq (p-1)^\ ...
- 试验Windows Embedded Standard 7 Service Pack 1 Evaluation Edition
=========================================== 是否支持再使用 RT 7 Lite 精简 ? ================================= ...
- MFC使用ShowWindow(SW_MAXIMIZE)任务栏消失的处理
ShowWindow(SW_SHOWMAXIMIZED);//窗口最大化 问题:在写程序时,如果包含了标题栏,但是没有包含最大化按钮或者最小话按钮. 那么人工用ShowWindow(SW_MAXIMI ...
- ArcMap10.1修改要素属性字段
ArcMap10.1修改要素属性字段 问题描述:在ArcMap10.1中编辑要素属性表时,遇到输入字段值的长度超过字段最大长度时,ArcMap会抛出“基础DBMS错误[ORA-12899:value ...
- Junit。。。
keep the bar green to keep the code clean.
- HttpServletRequest 的使用
1. 从HttpServletRequest中读取请求参数 InputStream inStream = request.getInputStream(); ByteArrayOutputStream ...
- 第二百三十八天 how can I 坚持
最近睡觉,老是梦到死亡,多么可怕啊.感觉好虚幻. spring事务管理,框架搭建. 看着没多少事,最起来感觉好多啊. 梳理下最近爬过的山,时间久了会忘,反正上周没爬,下雪了. 10月18号-香山,11 ...
- POJ 1287 Networking (最小生成树)
Networking 题目链接: http://acm.hust.edu.cn/vjudge/contest/124434#problem/B Description You are assigned ...
- MANACHER---求最长回文串
求最长回文串,如果是暴力的方法的话,会枚举每个字符为中心,然后向两边检测求出最长的回文串,时间复杂度在最坏的情况下就是0(n^2),为什么时间复杂度会这么高,因为对于每一个作为中心的字符的检测是独立的 ...