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*/
  9 Ext.BLANK_IMAGE_URL  =   ' ../extjs/resources/images/default/s.gif ' ;
 10
 11 Ext.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 >