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)的更多相关文章

  1. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  3. ASP.NET Core 之 Identity 入门(一)

    前言 在 ASP.NET Core 中,仍然沿用了 ASP.NET里面的 Identity 组件库,负责对用户的身份进行认证,总体来说的话,没有MVC 5 里面那么复杂,因为在MVC 5里面引入了OW ...

  4. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  5. Online Judge(OJ)搭建(第一版)

    搭建 OJ 需要的知识(重要性排序): Java SE(Basic Knowledge, String, FileWriter, JavaCompiler, URLClassLoader, Secur ...

  6. 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑

    阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...

  7. 如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成

    阅读目录 前言 建模 实现 结语 一.前言 前面几篇已经实现了一个基本的购买+售价计算的过程,这次再让售价丰满一些,增加一个会员价的概念.会员价在现在的主流电商中,是一个不大常见的模式,其带来的问题是 ...

  8. 【.net 深呼吸】细说CodeDom(5):类型成员

    前文中,老周已经厚着脸皮介绍了类型的声明,类型里面包含的自然就是类型成员了,故,顺着这个思路,今天咱们就了解一下如何向类型添加成员. 咱们都知道,常见的类型成员,比如字段.属性.方法.事件.表示代码成 ...

  9. 【.net 深呼吸】细说CodeDom(4):类型定义

    上一篇文章中说了命名空间,你猜猜接下来该说啥.是了,命名空间下面就是类型,知道了如何生成命名空间的定义代码,之后就该学会如何声明类型了. CLR的类型通常有这么几种:类.接口.结构.枚举.委托.是这么 ...

随机推荐

  1. 在PC上收发短信--Pidgin短信(Linux Pidgin插件)

    Pidgin短信是Pidgin/empathy的一个插件.当手机收到短信进,电脑上面有提示:可以在电脑上发手机短信.让你时刻保持在电脑屏幕上,也不会错过短信.目前只支持安卓,wifi连接方式. 功能 ...

  2. [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)^\ ...

  3. 试验Windows Embedded Standard 7 Service Pack 1 Evaluation Edition

    =========================================== 是否支持再使用 RT 7 Lite 精简 ? ================================= ...

  4. MFC使用ShowWindow(SW_MAXIMIZE)任务栏消失的处理

    ShowWindow(SW_SHOWMAXIMIZED);//窗口最大化 问题:在写程序时,如果包含了标题栏,但是没有包含最大化按钮或者最小话按钮. 那么人工用ShowWindow(SW_MAXIMI ...

  5. ArcMap10.1修改要素属性字段

    ArcMap10.1修改要素属性字段 问题描述:在ArcMap10.1中编辑要素属性表时,遇到输入字段值的长度超过字段最大长度时,ArcMap会抛出“基础DBMS错误[ORA-12899:value ...

  6. Junit。。。

    keep the bar green to keep the code clean.

  7. HttpServletRequest 的使用

    1. 从HttpServletRequest中读取请求参数 InputStream inStream = request.getInputStream(); ByteArrayOutputStream ...

  8. 第二百三十八天 how can I 坚持

    最近睡觉,老是梦到死亡,多么可怕啊.感觉好虚幻. spring事务管理,框架搭建. 看着没多少事,最起来感觉好多啊. 梳理下最近爬过的山,时间久了会忘,反正上周没爬,下雪了. 10月18号-香山,11 ...

  9. POJ 1287 Networking (最小生成树)

    Networking 题目链接: http://acm.hust.edu.cn/vjudge/contest/124434#problem/B Description You are assigned ...

  10. MANACHER---求最长回文串

    求最长回文串,如果是暴力的方法的话,会枚举每个字符为中心,然后向两边检测求出最长的回文串,时间复杂度在最坏的情况下就是0(n^2),为什么时间复杂度会这么高,因为对于每一个作为中心的字符的检测是独立的 ...