extjs学习札记（六) grid中数据的保存，添加和删除
extjs学习笔记（六) grid中数据的保存，添加和删除
在上一个系列当中，我们学习了如何对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 },
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148