Extjs复习笔记（十六）-- 可编辑的grid

可编辑的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 'name' below matches the tag name to read, except 'availDate'
                // which is mapped to the tag 'availability'
                {name: 'common', type: 'string'},
                {name: 'botanical', type: 'string'},
                {name: 'light'},
                {name: 'price', type: 'float'},             
                // dates can be automatically converted by specifying dateFormat
                {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
                {name: 'indoor', type: 'bool'}
            ]
        }),

        sortInfo: {field:'common', direction:'ASC'}
    });

    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width: 600,
        height: 300,
        autoExpandColumn: 'common', // column with this id will be expanded
        title: 'Edit Plants?',
        frame: true,
        clicksToEdit: 1,
        tbar: [{
            text: 'Add Plant',
            handler : function(){
                // access the Record constructor through the grid's store
                var Plant = grid.getStore().recordType;
/*recordType：The Record constructor as supplied to (or created by) the Reader. Read-only.而且这是一个数组，里面可以自定义内容，这里要传给Ext.data.Record.create.
If the Reader was constructed by passing in an Array of Ext.data.Field definition objects, instead of a Record constructor, it will implicitly create a Record constructor from that Array (see Ext.data.Record.create for additional details).
This property may be used to create new Records of the type held in this Store, for example:
// create the data store
    var store = new Ext.data.ArrayStore({
        autoDestroy: true,
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    // create the Grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        colModel: new Ext.grid.ColumnModel({
            columns: [
                {id:'company', header: 'Company', width: 160, dataIndex: 'company'},
                {header: 'Price', renderer: 'usMoney', dataIndex: 'price'},
                {header: 'Change', renderer: change, dataIndex: 'change'},
                {header: '% Change', renderer: pctChange, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 85,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'}
            ],
            defaults: {
                sortable: true,
                width: 75
            }
        }),
        autoExpandColumn: 'company', // match the id specified in the column model
        height:350,
        width:600,
        title:'Array Grid',
        tbar: [{
            text: 'Add Record',
            handler : function(){
                var defaultData = {
                    change: 0,
                    company: 'New Company',
                    lastChange: (new Date()).clearTime(),
                    pctChange: 0,
                    price: 10
                };
                var recId = 3; // provide unique id
                var p = new store.recordType(defaultData, recId); // create new record
                grid.stopEditing();
                store.insert(0, p); // insert a new record into the store (also see add)
                grid.startEditing(0, 0);
            }
        }]
    });*/
                var p = new Plant({ //Plant就是上面定义的grid.getStore().recordType
                    common: 'New Plant 1',
                    light: 'Mostly Shade',
                    price: 0,
                    availDate: (new Date()).clearTime(),
                    indoor: false
                });
                grid.stopEditing(); //Stops any active editing
                store.insert(0, p); //往store中插入新加的内容
                grid.startEditing(0, 0); //把新加的列设成编辑状态
            }
        }]
    });

    // 当数据加载完成时 触发的事件
    store.load({
        // store loading is asynchronous, use a load listener or callback to handle results
        callback: function(){
            Ext.Msg.show({
                title: 'Store Load Callback',
                msg: 'store was loaded, data available for processing',
                modal: false, //设成非模态，就是当消息弹出框没关时还能操作后面的内容
                icon: Ext.Msg.INFO,
                buttons: Ext.Msg.OK
            });
        }
    });
});