大多数时候,我们只是使用grid来显示信息,但有时也需要在grid中对信息进行编辑。在extjs中,构造一个可编辑的grid非常方便。
我们来看下Ext.grid.EditorGridPanel,该类从GridPanel继承而来,通过对列提供editor进行编辑。在前边的例子中,我们用过renderer函数,知道可以把数据显示成我们希望的样子,而在编辑的时候,我们其实是针对的原始数据。另外,我们在编辑的时候,通常希望能够对用户的输入进行控制而不是任由用户随心所欲的输入,Ext.form命名空间有一些类能够对用户输入进行一些基本的控制,我们会在下边的代码中看到,这里我再次强调一下,在向服务器提交数据之前和数据在服务器进行处理之前,必须要进行数据的有效性验证。由于对grid已经比较熟悉了,下边就直接给出代码了:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
1///<reference path="vswd-ext_2.0.2.js" />
2/**//*
3*作者:大笨
4*日期:2009-10-20
5*版本:1.0
6*博客地址:http://yage.cnblogs.com
7*QQ:14202190
8*/
9Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
10
11Ext.onReady(function() {
12 Ext.QuickTips.init();
13
14 //格式化日期
15 function formatDate(value) {
16 return value ? value.dateFormat('Y年m月d日') : '';
17 }
18
19 // 别名
20 var fm = Ext.form;
21
22 //构造一个只能包含checkbox的列
23 var checkColumn = new Ext.grid.CheckColumn({
24 header: 'Indoor?',
25 dataIndex: 'indoor',
26 width: 55
27 });
28
29 // 构造ColumnModel
30 var cm = new Ext.grid.ColumnModel({
31 columns: [{
32 id: 'common',
33 header: 'Common Name',
34 dataIndex: 'common',
35 width: 220,
36 // 使用上边定义好的别名
37 editor: new fm.TextField({
38 allowBlank: false
39 })
40 }, {
41 header: 'Light',
42 dataIndex: 'light',
43 width: 130,
44 editor: new fm.ComboBox({
45 typeAhead: true,
46 triggerAction: 'all',
47 transform: 'light',
48 lazyRender: true,
49 listClass: 'x-combo-list-small'
50 })
51 }, {
52 header: 'Price',
53 dataIndex: 'price',
54 width: 70,
55 align: 'right',
56 renderer: 'usMoney',
57 editor: new fm.NumberField({
58 allowBlank: false,
59 allowNegative: false,
60 maxValue: 100000
61 })
62 }, {
63 header: 'Available',
64 dataIndex: 'availDate',
65 width: 95,
66 renderer: formatDate,
67 editor: new fm.DateField({
68 format: 'Y年m月d日',
69 minValue: '01/01/06',
70 disabledDays: [0, 6],
71 disabledDaysText: 'Plants are not available on the weekends'
72 })
73 },
74 checkColumn,
75 ],
76 defaults: {
77 sortable:true
78 }
79});
80
81
82// 构造一个Store对象
83var store = new Ext.data.Store({
84
85 url: 'plants.xml',
86
87 reader: new Ext.data.XmlReader(
88 {
89 record: 'plant'
90 },
91
92 [
93 { name: 'common', type: 'string' },
94 { name: 'botanical', type: 'string' },
95 { name: 'light' },
96 { name: 'price', type: 'float' },
97 { name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
98 { name: 'indoor', type: 'bool' }
99 ]
100 ),
101
102 sortInfo: { field: 'common', direction: 'ASC' }
103});
104
105// 构造可编辑的grid
106var grid = new Ext.grid.EditorGridPanel({
107 store: store,
108 cm: cm,
109 renderTo: 'grid',
110 width: 600,
111 height: 300,
112 autoExpandColumn: 'common',
113 title: 'Edit Plants?',
114 frame: true,
115 plugins: checkColumn,
116 clicksToEdit: 1
117});
118
119// 触发数据的加载
120store.load();
121});
我们在前边的系列中使用过数据和json来作为数据保存或者传递的格式,考虑到xml也很常用,这次我们使用了xml文件,内容如下:
plants.xml<?xml version="1.0" encoding="utf-8"?>
2<catalog>
3 <plant>
4 <common>Bloodroot</common>
5 <botanical>Sanguinaria canadensis</botanical>
6 <zone>4</zone>
7 <light>Mostly Shady</light>
8 <price>2.44</price>
9 <availability>03/15/2006</availability>
10 <indoor>true</indoor>
11 </plant>
12 <plant>
13 <common>Columbine</common>
14 <botanical>Aquilegia canadensis</botanical>
15 <zone>3</zone>
16 <light>Mostly Shady</light>
17 <price>9.37</price>
18 <availability>03/06/2006</availability>
19 <indoor>true</indoor>
20 </plant>
21 <plant>
22 <common>Marsh Marigold</common>
23 <botanical>Caltha palustris</botanical>
24 <zone>4</zone>
25 <light>Mostly Sunny</light>
26 <price>6.81</price>
27 <availability>05/17/2006</availability>
28 <indoor>false</indoor>
29 </plant>
30 <plant>
31 <common>Cowslip</common>
分享到:
相关推荐
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态...ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 ...
Extjs 5 学习笔记,在网上下载整理好的。
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用
适合ExtJs开发人员extjs技术上手以及深入
ExtJS_可编辑Grid进度条,可编辑,随意输入数值,根据进度情况变色的Grid列嵌入式滚动条.
根据word做的pdf版本的ExtJs学习笔记,根据原版进行了删减,欢迎大家下载啊,哈哈。
ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...
非常适合新手学习extjs的笔记,让你少走弯路
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
extJs学习笔记,让新手能够快速理解extJS的原理,深人浅出的了解extjs的精髓。
是我学习Extjs 的学习笔记收藏整理,学习extjs的同学可以好好看看,绝对有好处,学到很多知识!
老师整理的extjs学习笔记,和大家共享
NULL 博文链接:https://lucky16.iteye.com/blog/1522254