extjs学习笔记（五）
extjs学习笔记（五）可编辑的grid作者：大笨  来源：博客园  发布时间：2009-10-22 01:46  阅读：2487 次  原文链接   [收藏]  
大多数时候，我们只是使用grid来显示信息，但有时也需要在grid中对信息进行编辑。在extjs中，构造一个可编辑的grid非常方便。

我们来看下Ext.grid.EditorGridPanel，该类从GridPanel继承而来，通过对列提供editor进行编辑。在前边的例子中，我们用过renderer函数，知道可以把数据显示成我们希望的样子，而在编辑的时候，我们其实是针对的原始数据。另外，我们在编辑的时候，通常希望能够对用户的输入进行控制而不是任由用户随心所欲的输入，Ext.form命名空间有一些类能够对用户输入进行一些基本的控制，我们会在下边的代码中看到，这里我再次强调一下，在向服务器提交数据之前和数据在服务器进行处理之前，必须要进行数据的有效性验证。由于对grid已经比较熟悉了，下边就直接给出代码了：


  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,