extjs学习笔记（六--3) grid中数据的保存，添加和删除
我们先通过grid的getSelectionModel方法获得当前的选择模型，由于当前我们使用了行选择模型，所以返回的是RowSelectionModel的对象，然后通过该对象的hasSelection方法判断有没有行呗选中，没有的话就弹出一个对话框，如果有选中的行要被删除，弹出一个提示框让用户确定删除操作，如果确实要删除，使用RowSelectionModel对象的getSelections方法返回所有被选择行的集合，遍历此集合，从store中去掉集合中的行。看看效果图：http://images.cnblogs.com/cnblogs_com/yage/%E5%88%A0%E9%99%A4%E5%89%8D.jpg
点击“是”，所有选中的行被删除，通过firebug可以看到被删除的行在store的removed属性中保存。
但是有些人可能不习惯这里所谓的行选择模型，他们可能喜欢看到在每一行的前边有一个checkbox，勾选了之后表示选择该行，extjs中的CheckboxSelectionModel类可以方便的让我们实现这一点，该类继承自RowSelectionModel，说明这只是一种特殊的行选择模型。我们具体来看看怎么进行操作。首先需要定义一个CheckboxSelectionModel的对象：var sm=new Ext.grid.CheckboxSelctionModle({checkOnly:true})，这里chckOnly:true表明只能通过checkbox来选择行，为false的话则还可以通过我们上边提到的方法来选择行。接下来需要把原来的行选择模型替换成我们新的sm，然后运行一下看看吧。我们没有看到预期中的效果，这是为什么呢？仔细想一想，确实应该是看不到什么效果，我们知道列都是在ColumnModel里边配置的，我们的CheckboxSelectionModel需要添加一列，自然也要在其中配置。那我们就加上去吧，完整的代码如下：
<div class="cnblogs_code"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1http://www.cnblogs.com/Images/OutliningIndicators/None.gif///<reference path="vswd-ext_2.0.2.js" />
2http://www.cnblogs.com/Images/OutliningIndicators/None.gif/*
3http://www.cnblogs.com/Images/OutliningIndicators/None.gif*作者：大笨
4http://www.cnblogs.com/Images/OutliningIndicators/None.gif*日期：2009-10-20
5http://www.cnblogs.com/Images/OutliningIndicators/None.gif*版本：1.0
6http://www.cnblogs.com/Images/OutliningIndicators/None.gif*博客地址：http://yage.cnblogs.com
7http://www.cnblogs.com/Images/OutliningIndicators/None.gif*QQ：14202190
8http://www.cnblogs.com/Images/OutliningIndicators/None.gif*/
9http://www.cnblogs.com/Images/OutliningIndicators/None.gifExt.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
10http://www.cnblogs.com/Images/OutliningIndicators/None.gif
11http://www.cnblogs.com/Images/OutliningIndicators/None.gifExt.onReady(function() {
12http://www.cnblogs.com/Images/OutliningIndicators/None.gif Ext.QuickTips.init();
13http://www.cnblogs.com/Images/OutliningIndicators/None.gif
14http://www.cnblogs.com/Images/OutliningIndicators/None.gif //格式化日期
15http://www.cnblogs.com/Images/OutliningIndicators/None.gif function formatDate(value) {
16http://www.cnblogs.com/Images/OutliningIndicators/None.gif return value ? value.dateFormat('Y年m月d日') : '';
17http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
18http://www.cnblogs.com/Images/OutliningIndicators/None.gif
19http://www.cnblogs.com/Images/OutliningIndicators/None.gif // 别名
20http://www.cnblogs.com/Images/OutliningIndicators/None.gif var fm = Ext.form;
21http://www.cnblogs.com/Images/OutliningIndicators/None.gif
22http://www.cnblogs.com/Images/OutliningIndicators/None.gif //checkbox选择模型
23http://www.cnblogs.com/Images/OutliningIndicators/None.gif var sm = new Ext.grid.CheckboxSelectionModel({ checkOnly: true });
24http://www.cnblogs.com/Images/OutliningIndicators/None.gif
25http://www.cnblogs.com/Images/OutliningIndicators/None.gif //构造一个只能包含checkbox的列
26http://www.cnblogs.com/Images/OutliningIndicators/None.gif var checkColumn = new Ext.grid.CheckColumn({
27http://www.cnblogs.com/Images/OutliningIndicators/None.gif header: 'Indoor?',
28http://www.cnblogs.com/Images/OutliningIndicators/None.gif dataIndex: 'indoor',
29http://www.cnblogs.com/Images/OutliningIndicators/None.gif width: 55
30http://www.cnblogs.com/Images/OutliningIndicators/None.gif });
31http://www.cnblogs.com/Images/OutliningIndicators/None.gif
32http://www.cnblogs.com/Images/OutliningIndicators/None.gif // 构造ColumnModel
33http://www.cnblogs.com/Images/OutliningIndicators/None.gif var cm = new Ext.grid.ColumnModel({
34http://www.cnblogs.com/Images/OutliningIndicators/None.gif columns: [
35http://www.cnblogs.com/Images/OutliningIndicators/None.gif sm,
36http://www.cnblogs.com/Images/OutliningIndicators/None.gif {
37http://www.cnblogs.com/Images/OutliningIndicators/None.gif id: 'common',
38http://www.cnblogs.com/Images/OutliningIndicators/None.gif header: 'Common Name',
39http://www.cnblogs.com/Images/OutliningIndicators/None.gif dataIndex: 'common',
40http://www.cnblogs.com/Images/OutliningIndicators/None.gif width: 220,
41http://www.cnblogs.com/Images/OutliningIndicators/None.gif // 使用上边定义好的别名
42http://www.cnblogs.com/Images/OutliningIndicators/None.gif editor: new fm.TextField({
43http://www.cnblogs.com/Images/OutliningIndicators/None.gif allowBlank: false
44http://www.cnblogs.com/Images/OutliningIndicators/None.gif })
45http://www.cnblogs.com/Images/OutliningIndicators/None.gif }, {
46http://www.cnblogs.com/Images/OutliningIndicators/None.gif header: 'Light',
47http://www.cnblogs.com/Images/OutliningIndicators/None.gif dataIndex: 'light',
48http://www.cnblogs.com/Images/OutliningIndicators/None.gif width: 130,
49http://www.cnblogs.com/Images/OutliningIndicators/None.gif editor: new fm.ComboBox({
50http://www.cnblogs.com/Images/OutliningIndicators/None.gif typeAhead: true,
51http://www.cnblogs.com/Images/OutliningIndicators/None.gif triggerAction: 'all',
52http://www.cnblogs.com/Images/OutliningIndicators/None.gif transform: 'light',
53http://www.cnblogs.com/Images/OutliningIndicators/None.gif lazyRender: true,
54http://www.cnblogs.com/Images/OutliningIndicators/None.gif listClass: 'x-combo-list-small'
55http://www.cnblogs.com/Images/OutliningIndicators/None.gif })
56http://www.cnblogs.com/Images/OutliningIndicators/None.gif }, {
57http://www.cnblogs.com/Images/OutliningIndicators/None.gif header: 'Price',
58http://www.cnblogs.com/Images/OutliningIndicators/None.gif dataIndex: 'price',
59http://www.cnblogs.com/Images/OutliningIndicators/None.gif width: 70,
60http://www.cnblogs.com/Images/OutliningIndicators/None.gif align: 'right',
61http://www.cnblogs.com/Images/OutliningIndicators/None.gif renderer: 'usMoney',
62http://www.cnblogs.com/Images/OutliningIndicators/None.gif editor: new fm.NumberField({
63http://www.cnblogs.com/Images/OutliningIndicators/None.gif allowBlank: false,
64http://www.cnblogs.com/Images/OutliningIndicators/None.gif allowNegative: false,
65http://www.cnblogs.com/Images/OutliningIndicators/None.gif maxValue: 100000
66http://www.cnblogs.com/Images/OutliningIndicators/None.gif })
67http://www.cnblogs.com/Images/OutliningIndicators/None.gif }, {
68http://www.cnblogs.com/Images/OutliningIndicators/None.gif header: 'Available',
69http://www.cnblogs.com/Images/OutliningIndicators/None.gif dataIndex: 'availDate',
70http://www.cnblogs.com/Images/OutliningIndicators/None.gif width: 95,
71http://www.cnblogs.com/Images/OutliningIndicators/None.gif renderer: formatDate,
72http://www.cnblogs.com/Images/OutliningIndicators/None.gif editor: new fm.DateField({
73http://www.cnblogs.com/Images/OutliningIndicators/None.gif format: 'Y年m月d日',
74http://www.cnblogs.com/Images/OutliningIndicators/None.gif minValue: '01/01/06',
75http://www.cnblogs.com/Images/OutliningIndicators/None.gif disabledDays: ,
76http://www.cnblogs.com/Images/OutliningIndicators/None.gif disabledDaysText: 'Plants are not available on the weekends'
77http://www.cnblogs.com/Images/OutliningIndicators/None.gif })
78http://www.cnblogs.com/Images/OutliningIndicators/None.gif },
79http://www.cnblogs.com/Images/OutliningIndicators/None.gif checkColumn,
80http://www.cnblogs.com/Images/OutliningIndicators/None.gif ],
81http://www.cnblogs.com/Images/OutliningIndicators/None.gif defaults: {
82http://www.cnblogs.com/Images/OutliningIndicators/None.gif sortable: true
83http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
84http://www.cnblogs.com/Images/OutliningIndicators/None.gif });
85http://www.cnblogs.com/Images/OutliningIndicators/None.gif
86http://www.cnblogs.com/Images/OutliningIndicators/None.gif
87http://www.cnblogs.com/Images/OutliningIndicators/None.gif // 构造一个Store对象
88http://www.cnblogs.com/Images/OutliningIndicators/None.gif var store = new Ext.data.Store({
89http://www.cnblogs.com/Images/OutliningIndicators/None.gif
90http://www.cnblogs.com/Images/OutliningIndicators/None.gif url: 'plants.xml',
91http://www.cnblogs.com/Images/OutliningIndicators/None.gif
92http://www.cnblogs.com/Images/OutliningIndicators/None.gif reader: new Ext.data.XmlReader(
93http://www.cnblogs.com/Images/OutliningIndicators/None.gif {
94http://www.cnblogs.com/Images/OutliningIndicators/None.gif record: 'plant'
95http://www.cnblogs.com/Images/OutliningIndicators/None.gif },
96http://www.cnblogs.com/Images/OutliningIndicators/None.gif
97http://www.cnblogs.com/Images/OutliningIndicators/None.gif [
98http://www.cnblogs.com/Images/OutliningIndicators/None.gif { name: 'common', type: 'string' },
99http://www.cnblogs.com/Images/OutliningIndicators/None.gif { name: 'botanical', type: 'string' },
100http://www.cnblogs.com/Images/OutliningIndicators/None.gif { name: 'light' },
101http://www.cnblogs.com/Images/OutliningIndicators/None.gif { name: 'price', type: 'float' },
102http://www.cnblogs.com/Images/OutliningIndicators/None.gif { name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
103http://www.cnblogs.com/Images/OutliningIndicators/None.gif { name: 'indoor', type: 'bool' }
104http://www.cnblogs.com/Images/OutliningIndicators/None.gif ]
105http://www.cnblogs.com/Images/OutliningIndicators/None.gif ),
106http://www.cnblogs.com/Images/OutliningIndicators/None.gif sortInfo: { field: 'common', direction: 'ASC' }
107http://www.cnblogs.com/Images/OutliningIndicators/None.gif });
108http://www.cnblogs.com/Images/OutliningIndicators/None.gif
109http://www.cnblogs.com/Images/OutliningIndicators/None.gif // 构造可编辑的grid
110http://www.cnblogs.com/Images/OutliningIndicators/None.gif var grid = new Ext.grid.EditorGridPanel({
111http://www.cnblogs.com/Images/OutliningIndicators/None.gif //sm: new Ext.grid.RowSelectionModel({ singleSelect: false }),
112http://www.cnblogs.com/Images/OutliningIndicators/None.gif sm: sm,
113http://www.cnblogs.com/Images/OutliningIndicators/None.gif store: store,
114http://www.cnblogs.com/Images/OutliningIndicators/None.gif cm: cm,
115http://www.cnblogs.com/Images/OutliningIndicators/None.gif renderTo: 'grid',
116http://www.cnblogs.com/Images/OutliningIndicators/None.gif width: 600,
117http://www.cnblogs.com/Images/OutliningIndicators/None.gif height: 300,
118http://www.cnblogs.com/Images/OutliningIndicators/None.gif autoExpandColumn: 'common',
119http://www.cnblogs.com/Images/OutliningIndicators/None.gif title: 'Edit Plants?',
120http://www.cnblogs.com/Images/OutliningIndicators/None.gif frame: true,
121http://www.cnblogs.com/Images/OutliningIndicators/None.gif plugins: checkColumn,
122http://www.cnblogs.com/Images/OutliningIndicators/None.gif clicksToEdit: 2,
123http://www.cnblogs.com/Images/OutliningIndicators/None.gif listeners: {
124http://www.cnblogs.com/Images/OutliningIndicators/None.gif "afterEdit": {
125http://www.cnblogs.com/Images/OutliningIndicators/None.gif fn: afterEdit,
126http://www.cnblogs.com/Images/OutliningIndicators/None.gif scope: this
127http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
128http://www.cnblogs.com/Images/OutliningIndicators/None.gif },
129http://www.cnblogs.com/Images/OutliningIndicators/None.gif tbar: [{
130http://www.cnblogs.com/Images/OutliningIndicators/None.gif text: "保存",
131http://www.cnblogs.com/Images/OutliningIndicators/None.gif handler: function() {
132http://www.cnblogs.com/Images/OutliningIndicators/None.gif var modified = store.modified;
133http://www.cnblogs.com/Images/OutliningIndicators/None.gif updateData(modified);
134http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
135http://www.cnblogs.com/Images/OutliningIndicators/None.gif },
136http://www.cnblogs.com/Images/OutliningIndicators/None.gif '-',
137http://www.cnblogs.com/Images/OutliningIndicators/None.gif {
138http://www.cnblogs.com/Images/OutliningIndicators/None.gif text: "增加",
139http://www.cnblogs.com/Images/OutliningIndicators/None.gif handler: function() {
140http://www.cnblogs.com/Images/OutliningIndicators/None.gif var Plant = store.recordType;
141http://www.cnblogs.com/Images/OutliningIndicators/None.gif var p = new Plant({
142http://www.cnblogs.com/Images/OutliningIndicators/None.gif common: 'New Plant 1',
143http://www.cnblogs.com/Images/OutliningIndicators/None.gif light: 'Mostly Shade',
144http://www.cnblogs.com/Images/OutliningIndicators/None.gif price: 0,
145http://www.cnblogs.com/Images/OutliningIndicators/None.gif availDate: (new Date()).clearTime(),
146http://www.cnblogs.com/Images/OutliningIndicators/None.gif indoor: false
147http://www.cnblogs.com/Images/OutliningIndicators/None.gif });
148http://www.cnblogs.com/Images/OutliningIndicators/None.gif grid.stopEditing();
149http://www.cnblogs.com/Images/OutliningIndicators/None.gif store.insert(0, p);
150http://www.cnblogs.com/Images/OutliningIndicators/None.gif grid.startEditing(0, 0);
151http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
152http://www.cnblogs.com/Images/OutliningIndicators/None.gif },
153http://www.cnblogs.com/Images/OutliningIndicators/None.gif " ",
154http://www.cnblogs.com/Images/OutliningIndicators/None.gif {
155http://www.cnblogs.com/Images/OutliningIndicators/None.gif text: "删除",
156http://www.cnblogs.com/Images/OutliningIndicators/None.gif handler: function() {
157http://www.cnblogs.com/Images/OutliningIndicators/None.gif var selModel = grid.getSelectionModel();
158http://www.cnblogs.com/Images/OutliningIndicators/None.gif if (selModel.hasSelection()) {
159http://www.cnblogs.com/Images/OutliningIndicators/None.gif Ext.Msg.confirm("警告", "确定要删除吗？", function(button) {
160http://www.cnblogs.com/Images/OutliningIndicators/None.gif if (button == "yes") {
161http://www.cnblogs.com/Images/OutliningIndicators/None.gif var selections = selModel.getSelections();
162http://www.cnblogs.com/Images/OutliningIndicators/None.gif Ext.each(selections, function(item) {
163http://www.cnblogs.com/Images/OutliningIndicators/None.gif store.remove(item);
164http://www.cnblogs.com/Images/OutliningIndicators/None.gif store.removed.push(item);
165http://www.cnblogs.com/Images/OutliningIndicators/None.gif });
166http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
167
168http://www.cnblogs.com/Images/OutliningIndicators/None.gif });
169http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
170http://www.cnblogs.com/Images/OutliningIndicators/None.gif else {
171http://www.cnblogs.com/Images/OutliningIndicators/None.gif Ext.Msg.alert("错误", "没有任何行被选中，无法进行删除操作！");
172http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
173http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
174http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
175http://www.cnblogs.com/Images/OutliningIndicators/None.gif ]
176http://www.cnblogs.com/Images/OutliningIndicators/None.gif });
177http://www.cnblogs.com/Images/OutliningIndicators/None.gif
178http://www.cnblogs.com/Images/OutliningIndicators/None.gif // 触发数据的加载
179http://www.cnblogs.com/Images/OutliningIndicators/None.gif store.load();
180http://www.cnblogs.com/Images/OutliningIndicators/None.gif
181http://www.cnblogs.com/Images/OutliningIndicators/None.gif //发送数据到服务器端进行更新
182http://www.cnblogs.com/Images/OutliningIndicators/None.gif function updateData(modified) {
183http://www.cnblogs.com/Images/OutliningIndicators/None.gif var json = [];
184http://www.cnblogs.com/Images/OutliningIndicators/None.gif Ext.each(modified, function(item) {
185http://www.cnblogs.com/Images/OutliningIndicators/None.gif json.push(item.data);
186http://www.cnblogs.com/Images/OutliningIndicators/None.gif });
187http://www.cnblogs.com/Images/OutliningIndicators/None.gif if (json.length > 0) {
188http://www.cnblogs.com/Images/OutliningIndicators/None.gif Ext.Ajax.request({
189http://www.cnblogs.com/Images/OutliningIndicators/None.gif url: "EditGrid.aspx",
190http://www.cnblogs.com/Images/OutliningIndicators/None.gif params: { data: Ext.util.JSON.encode(json) },
191http://www.cnblogs.com/Images/OutliningIndicators/None.gif method: "POST",
192http://www.cnblogs.com/Images/OutliningIndicators/None.gif success: function(response) {
193http://www.cnblogs.com/Images/OutliningIndicators/None.gif Ext.Msg.alert("信息", "数据更新成功！", function() { store.reload(); });
194http://www.cnblogs.com/Images/OutliningIndicators/None.gif },
195http://www.cnblogs.com/Images/OutliningIndicators/None.gif failure: function(response) {
196http://www.cnblogs.com/Images/OutliningIndicators/None.gif Ext.Msg.alert("警告", "数据更新失败，请稍后再试！");
197http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
198http://www.cnblogs.com/Images/OutliningIndicators/None.gif });
199http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
200http://www.cnblogs.com/Images/OutliningIndicators/None.gif else {
201http://www.cnblogs.com/Images/OutliningIndicators/None.gif Ext.Msg.alert("警告", "没有任何需要更新的数据！");
202http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
203http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
204http://www.cnblogs.com/Images/OutliningIndicators/None.gif
205http://www.cnblogs.com/Images/OutliningIndicators/None.gif //编辑后触发的事件，可在此进行数据有效性的验证
206http://www.cnblogs.com/Images/OutliningIndicators/None.gif function afterEdit(e) {
207http://www.cnblogs.com/Images/OutliningIndicators/None.gif if (e.field == "common") {
208http://www.cnblogs.com/Images/OutliningIndicators/None.gif if (e.value == "大笨") {
209http://www.cnblogs.com/Images/OutliningIndicators/None.gif Ext.Msg.alert("错误", "大笨是人物不是植物", function() { grid.startEditing(e.row, e.column) });
210http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
211http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
212http://www.cnblogs.com/Images/OutliningIndicators/None.gif }
213http://www.cnblogs.com/Images/OutliningIndicators/None.gif});
页:
[1]