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????????????????},