您的位置: 首页  >  IT文章  >  extjs学习札记（五）可编辑的grid

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

分类: IT文章 • 2022-09-02 10:16:31
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 />-->  1extjs学习札记（五）可编辑的grid///<reference path="vswd-ext_2.0.2.js" />
  2extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid/**//*
  3extjs学习札记（五）可编辑的grid*作者：大笨
  4extjs学习札记（五）可编辑的grid*日期：2009-10-20
  5extjs学习札记（五）可编辑的grid*版本：1.0
  6extjs学习札记（五）可编辑的grid*博客地址：http://yage.cnblogs.com
  7extjs学习札记（五）可编辑的grid*QQ：14202190
  8extjs学习札记（五）可编辑的grid*/
  9extjs学习札记（五）可编辑的gridExt.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
 10extjs学习札记（五）可编辑的grid
 11extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的gridExt.onReady(function() extjs学习札记（五）可编辑的grid{
 12extjs学习札记（五）可编辑的grid    Ext.QuickTips.init();
 13extjs学习札记（五）可编辑的grid
 14extjs学习札记（五）可编辑的grid    //格式化日期
 15extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid    function formatDate(value) extjs学习札记（五）可编辑的grid{
 16extjs学习札记（五）可编辑的grid        return value ? value.dateFormat('Y年m月d日') : '';
 17extjs学习札记（五）可编辑的grid    }
 18extjs学习札记（五）可编辑的grid
 19extjs学习札记（五）可编辑的grid    // 别名
 20extjs学习札记（五）可编辑的grid    var fm = Ext.form;
 21extjs学习札记（五）可编辑的grid
 22extjs学习札记（五）可编辑的grid    //构造一个只能包含checkbox的列
 23extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid    var checkColumn = new Ext.grid.CheckColumn(extjs学习札记（五）可编辑的grid{
 24extjs学习札记（五）可编辑的grid        header: 'Indoor?',
 25extjs学习札记（五）可编辑的grid        dataIndex: 'indoor',
 26extjs学习札记（五）可编辑的grid        width: 55
 27extjs学习札记（五）可编辑的grid    });
 28extjs学习札记（五）可编辑的grid
 29extjs学习札记（五）可编辑的grid    // 构造ColumnModel
 30extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid    var cm = new Ext.grid.ColumnModel(extjs学习札记（五）可编辑的grid{
 31extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid        columns: [extjs学习札记（五）可编辑的grid{
 32extjs学习札记（五）可编辑的grid            id: 'common',
 33extjs学习札记（五）可编辑的grid            header: 'Common Name',
 34extjs学习札记（五）可编辑的grid            dataIndex: 'common',
 35extjs学习札记（五）可编辑的grid            width: 220,
 36extjs学习札记（五）可编辑的grid            // 使用上边定义好的别名
 37extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid            editor: new fm.TextField(extjs学习札记（五）可编辑的grid{
 38extjs学习札记（五）可编辑的grid                allowBlank: false
 39extjs学习札记（五）可编辑的grid            })
 40extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid        }, extjs学习札记（五）可编辑的grid{
 41extjs学习札记（五）可编辑的grid            header: 'Light',
 42extjs学习札记（五）可编辑的grid            dataIndex: 'light',
 43extjs学习札记（五）可编辑的grid            width: 130,
 44extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid            editor: new fm.ComboBox(extjs学习札记（五）可编辑的grid{
 45extjs学习札记（五）可编辑的grid                typeAhead: true,
 46extjs学习札记（五）可编辑的grid                triggerAction: 'all',
 47extjs学习札记（五）可编辑的grid                transform: 'light',
 48extjs学习札记（五）可编辑的grid                lazyRender: true,
 49extjs学习札记（五）可编辑的grid                listClass: 'x-combo-list-small'
 50extjs学习札记（五）可编辑的grid            })
 51extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid        }, extjs学习札记（五）可编辑的grid{
 52extjs学习札记（五）可编辑的grid            header: 'Price',
 53extjs学习札记（五）可编辑的grid            dataIndex: 'price',
 54extjs学习札记（五）可编辑的grid            width: 70,
 55extjs学习札记（五）可编辑的grid            align: 'right',
 56extjs学习札记（五）可编辑的grid            renderer: 'usMoney',
 57extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid            editor: new fm.NumberField(extjs学习札记（五）可编辑的grid{
 58extjs学习札记（五）可编辑的grid                allowBlank: false,
 59extjs学习札记（五）可编辑的grid                allowNegative: false,
 60extjs学习札记（五）可编辑的grid                maxValue: 100000
 61extjs学习札记（五）可编辑的grid            })
 62extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid        }, extjs学习札记（五）可编辑的grid{
 63extjs学习札记（五）可编辑的grid            header: 'Available',
 64extjs学习札记（五）可编辑的grid            dataIndex: 'availDate',
 65extjs学习札记（五）可编辑的grid            width: 95,
 66extjs学习札记（五）可编辑的grid            renderer: formatDate,
 67extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid            editor: new fm.DateField(extjs学习札记（五）可编辑的grid{
 68extjs学习札记（五）可编辑的grid                format: 'Y年m月d日',
 69extjs学习札记（五）可编辑的grid                minValue: '01/01/06',
 70extjs学习札记（五）可编辑的grid                disabledDays: [0, 6],
 71extjs学习札记（五）可编辑的grid                disabledDaysText: 'Plants are not available on the weekends'
 72extjs学习札记（五）可编辑的grid            })
 73extjs学习札记（五）可编辑的grid        },
 74extjs学习札记（五）可编辑的grid        checkColumn,
 75extjs学习札记（五）可编辑的grid    ],
 76extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid        defaults: extjs学习札记（五）可编辑的grid{
 77extjs学习札记（五）可编辑的grid        sortable:true
 78extjs学习札记（五）可编辑的grid    }
 79extjs学习札记（五）可编辑的grid});
 80extjs学习札记（五）可编辑的grid
 81extjs学习札记（五）可编辑的grid
 82extjs学习札记（五）可编辑的grid// 构造一个Store对象
 83extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的gridvar store = new Ext.data.Store(extjs学习札记（五）可编辑的grid{
 84extjs学习札记（五）可编辑的grid
 85extjs学习札记（五）可编辑的grid    url: 'plants.xml',
 86extjs学习札记（五）可编辑的grid
 87extjs学习札记（五）可编辑的grid    reader: new Ext.data.XmlReader(
 88extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid            extjs学习札记（五）可编辑的grid{
 89extjs学习札记（五）可编辑的grid                record: 'plant'
 90extjs学习札记（五）可编辑的grid            },
 91extjs学习札记（五）可编辑的grid
 92extjs学习札记（五）可编辑的grid            [
 93extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid                extjs学习札记（五）可编辑的grid{ name: 'common', type: 'string' },
 94extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid                extjs学习札记（五）可编辑的grid{ name: 'botanical', type: 'string' },
 95extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid                extjs学习札记（五）可编辑的grid{ name: 'light' },
 96extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid                extjs学习札记（五）可编辑的grid{ name: 'price', type: 'float' },
 97extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid                extjs学习札记（五）可编辑的grid{ name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
 98extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid                extjs学习札记（五）可编辑的grid{ name: 'indoor', type: 'bool' }
 99extjs学习札记（五）可编辑的grid            ]
100extjs学习札记（五）可编辑的grid        ),
101extjs学习札记（五）可编辑的grid
102extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的grid    sortInfo: extjs学习札记（五）可编辑的grid{ field: 'common', direction: 'ASC' }
103extjs学习札记（五）可编辑的grid});
104extjs学习札记（五）可编辑的grid
105extjs学习札记（五）可编辑的grid// 构造可编辑的grid
106extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的gridvar grid = new Ext.grid.EditorGridPanel(extjs学习札记（五）可编辑的grid{
107extjs学习札记（五）可编辑的grid    store: store,
108extjs学习札记（五）可编辑的grid    cm: cm,
109extjs学习札记（五）可编辑的grid    renderTo: 'grid',
110extjs学习札记（五）可编辑的grid    width: 600,
111extjs学习札记（五）可编辑的grid    height: 300,
112extjs学习札记（五）可编辑的grid    autoExpandColumn: 'common',
113extjs学习札记（五）可编辑的grid    title: 'Edit Plants?',
114extjs学习札记（五）可编辑的grid    frame: true,
115extjs学习札记（五）可编辑的grid    plugins: checkColumn,
116extjs学习札记（五）可编辑的grid    clicksToEdit: 1
117extjs学习札记（五）可编辑的grid});
118extjs学习札记（五）可编辑的grid
119extjs学习札记（五）可编辑的grid// 触发数据的加载
120extjs学习札记（五）可编辑的gridstore.load();
121extjs学习札记（五）可编辑的grid});

     我们在前边的系列中使用过数据和json来作为数据保存或者传递的格式，考虑到xml也很常用，这次我们使用了xml文件，内容如下：

extjs学习札记（五）可编辑的gridextjs学习札记（五）可编辑的gridplants.xmlextjs学习札记（五）可编辑的grid<?xml version="1.0" encoding="utf-8"?>
  2extjs学习札记（五）可编辑的grid<catalog>
  3extjs学习札记（五）可编辑的grid  <plant>
  4extjs学习札记（五）可编辑的grid    <common>Bloodroot</common>
  5extjs学习札记（五）可编辑的grid    <botanical>Sanguinaria canadensis</botanical>
  6extjs学习札记（五）可编辑的grid    <zone>4</zone>
  7extjs学习札记（五）可编辑的grid    <light>Mostly Shady</light>
  8extjs学习札记（五）可编辑的grid    <price>2.44</price>
  9extjs学习札记（五）可编辑的grid    <availability>03/15/2006</availability>
 10extjs学习札记（五）可编辑的grid    <indoor>true</indoor>
 11extjs学习札记（五）可编辑的grid  </plant>
 12extjs学习札记（五）可编辑的grid  <plant>
 13extjs学习札记（五）可编辑的grid    <common>Columbine</common>
 14extjs学习札记（五）可编辑的grid    <botanical>Aquilegia canadensis</botanical>
 15extjs学习札记（五）可编辑的grid    <zone>3</zone>
 16extjs学习札记（五）可编辑的grid    <light>Mostly Shady</light>
 17extjs学习札记（五）可编辑的grid    <price>9.37</price>
 18extjs学习札记（五）可编辑的grid    <availability>03/06/2006</availability>
 19extjs学习札记（五）可编辑的grid    <indoor>true</indoor>
 20extjs学习札记（五）可编辑的grid  </plant>
 21extjs学习札记（五）可编辑的grid  <plant>
 22extjs学习札记（五）可编辑的grid    <common>Marsh Marigold</common>
 23extjs学习札记（五）可编辑的grid    <botanical>Caltha palustris</botanical>
 24extjs学习札记（五）可编辑的grid    <zone>4</zone>
 25extjs学习札记（五）可编辑的grid    <light>Mostly Sunny</light>
 26extjs学习札记（五）可编辑的grid    <price>6.81</price>
 27extjs学习札记（五）可编辑的grid    <availability>05/17/2006</availability>
 28extjs学习札记（五）可编辑的grid    <indoor>false</indoor>
 29extjs学习札记（五）可编辑的grid  </plant>
 30extjs学习札记（五）可编辑的grid  <plant>
 31extjs学习札记（五）可编辑的grid    <common>Cowslip</common>

相关推荐