可编辑的grid。

可以响应数据加载完时的事件。。。

可以编辑：

?Ext.onReady(function(){

    /**
     * Handler specified for the 'Available' column renderer
     * @param {Object} value
     */
    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    }

    // 取短名，这个技巧之后可以多加利用
    var fm = Ext.form;

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel({ //这个是比较实用的 
/*After the data has been read into the client side cache (Store), the ColumnModel is used to configure how and what parts of that data will be displayed in the vertical slices (columns) of the grid. The Ext.grid.ColumnModel Class is the default implementation of a ColumnModel used by implentations of GridPanel.*/
        // specify any defaults for each column
        defaults: {
            sortable: true // columns are not sortable by default           
        },
        columns: [{ //各个列的属性
            id: 'common',
            header: 'Common Name', //列名
            dataIndex: 'common', //对应得到的数据中的某一个
            width: 220,
            // 规定一下双击时编辑器的类型，其中fm是上面给Ext.Form取的短名
            editor: new fm.TextField({
                allowBlank: false //放空会画红线报错
            })
        }, {
            header: 'Light',
            dataIndex: 'light',
            width: 130,
            editor: new fm.ComboBox({
                typeAhead: true, //true to populate and autoselect the remainder of the text being typed after a configurable delay (typeAheadDelay) if it matches a known value (defaults to false)
                triggerAction: 'all', //每次选的时候都能显示所有的选项
                // transform the data already specified in html
                transform: 'light',
/*transform：The id, DOM node or element of an existing HTML SELECT to convert to a ComboBox. Note that if you specify this and the combo is going to be in an Ext.form.BasicForm or Ext.form.FormPanel, you must also set lazyRender = true.*/
                lazyRender: true,
                listClass: 'x-combo-list-small'
            })
        }, {
            header: 'Price',
            dataIndex: 'price',
            width: 70,
            align: 'right',
            renderer: 'usMoney',
            editor: new fm.NumberField({
                allowBlank: false,
                allowNegative: false,//是否允许为负数
                maxValue: 100000
            })
        }, {
            header: 'Available',
            dataIndex: 'availDate',
            width: 95,
            renderer: formatDate,
            editor: new fm.DateField({
                format: 'm/d/y',
                minValue: '01/01/06',//从06年1月1日起
                disabledDays: [0, 6],//表示周一和周五不能选 ，下面有图示
                disabledDaysText: 'Plants are not available on the weekends'
            })
        }, { //最后一列插入的是复选框checkcolumn
            xtype: 'checkcolumn',
            header: 'Indoor',
            dataIndex: 'indoor',
            width: 55
        }]
    });

    // create the Data Store
    var store = new Ext.data.Store({
        // destroy the store if the grid is destroyed
        autoDestroy: true, //这个加上好些，可以在一定程度上减少内存泄漏

        // load remote data using HTTP
        url: 'plants.xml',

        // specify a XmlReader (coincides with the XML format of the returned data)
        reader: new Ext.data.XmlReader({
            // records will have a 'plant' tag，record is the DomQuery path to the repeated element which contains record information.
            record: 'plant',
            // use an Array of field definition objects to implicitly create a Record constructor
            fields: [
                // the 'nam