在上一个系列当中,我们学习了如何对grid中的内容进行编辑,但是编辑的结果我们并没有保存,这在实际的应用中是没有什么意义的。在有些情况下,除了编辑之外,还要通过grid进行数据的增加和删除,这两个操作也涉及到对于数据的保存。在这个系列里边,我们将学习如何保存数据以及通过grid对数据进行增加和删除。
我们在前边的学习过程中已经知道,grid其实只是显示数据,它通过配置参数store来获得数据,这个参数需要的是Store类或者其子类的一个对象,里边封装了我们需要的数据。我们现在应该已经比较熟悉Store类了,这次我们需要使用它的一个属性modified,里边保存了被修改过的记录的集合。我们通过把上个系列中的例子改变一下来看看如何保存数据:
<!--<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对象
83 var 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
106 var 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 listeners: {
118 "afterEdit": {
119 fn: afterEdit,
120 scope: this
121 }
122 },
123 tbar: [{
124 text: "保存",
125 handler: function() {
126 var modified = store.modified;
127 updateData(modified);
128 }
129 }]
130 });
131
132 // 触发数据的加载
133 store.load();
134
135 //发送数据到服务器端进行更新
136 function updateData(modified) {
137 var json = [];
138 Ext.each(modified, function(item) {
139 json.push(item.data);
140 });
141 if (json.length > 0) {
142 Ext.Ajax.request({
143 url: "EditGrid.aspx",
144 params: { data: Ext.util.JSON.encode(json) },
145 method: "POST",
146 success: function(response) {
147 Ext.Msg.alert("信息", "数据更新成功!", function() { store.reload(); });
148 },
分享到:
相关推荐
ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4...
ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记(十二)---选项卡(tabs) ExtJS4学习笔记...
exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net
因此,现在几乎所有的grid控件都会支持分页功能。extjs也不例外,它对分页也提供了强大而方便的支持,使得我们在分页处理上可以得心应手。 在extjs中,类Ext.PagingToolbar封装了关于分页的操作,该类从Toolbar继承...
今天学习extjs中的grid,它可以说是功能强大,无出其右,只有你想不到的,没有它做不到的,呵呵,好像是有点夸张了。好,不说废话了,我们就从最简单的grid开始,一步步来看看extjs给我们提供的grid究竟给我们提供...
Extjs4.0学习与开发笔记 描述了菜单的实现、带搜索的Grid,带checkbox的可编辑的Grid等知识点,并附实现代码
EXTJS 学习笔片段1 Form ComboBox 远程ComboBox 替代页面上已经存在的Select控件 Grid EditorGridPanel 使用本地store Toolbar工具菜单创建 分页工具栏创建 Window 弹出处理window窗口(模态窗口) ...
因为前段时间有两个专案要用到extjs技术,所以自己学了一段时间,在专案才发现extjs的强大,无论对于开发者还是使用者他都是一场视觉盛宴,这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料,里面包括...
ext 4.0 学习笔记(1)Array Grid 2011-09-20 13:18 860人阅读 评论(1) 收藏 举报 今天刚开始接触EXT,直接跳过2.2等较旧版本;由于网上的中文资料几乎都是2.2,并且我也是刚开始接触EXT,所以用笔记的方式记录我...