extjs学习札记（五）可编辑的grid

大多数时候，我们只是使用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>