EXTJS4.0 gridpanel 用法筆記～～可編輯的grid

var CellEditing = Ext.create('Ext.grid.plugin.CellEditing', {   // 列編輯模式
    clicksToEdit : 1,  //單擊編輯  單元格修改
    autoCancel : false

});

var RowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行編輯模式
            clicksToMoveEditor : 1,   //雙擊編輯  整行修改
            autoCancel : false
        });


Ext.define('cmodel', {                //編輯狀態下,狀態列的下拉菜單的 model
    extend : 'Ext.data.Model',
    fields : [ {
        name : 'STATE',
        type : 'string'
    } ]
});
var states = [ {             //編輯狀態下,狀態列的下拉菜單的 data
    "STATE" : "0"
}, {
    "STATE" : "1"
}, {
    "STATE" : "2"
} ]

var cstore = Ext.create('Ext.data.Store', {        //編輯狀態下,狀態列的下拉菜單的 store
    model : 'cmodel',
    data : states
});

Ext.define('model', {              //表格Model
    extend : 'Ext.data.Model',
    fields : [ {
        name : 'ID',
        type : 'string'
    },  {
        name : 'TIME',
        type : 'date',
        dateFormat : 'Y-m-d'
    }, {
        name : 'STATE',
        type : 'string'
    } ]
});

var store = Ext.create('Ext.data.Store', {      //表格store
    model : 'unitun',
    proxy : {
        type : 'ajax',
        url : '',
        reader : {
            type : 'json',
            root : 'root'

        }
    }
});

// 創建機組表格
var grid = Ext.create('Ext.grid.Panel', {
    region : 'center',
    store : store,
    width : document.body.clientWidth - 200,
    columnLines : true,         //true爲顯示列的分割線
    layout : {                            //layout樣式   用法和swing差不多,常用的就是border.  這裏的hbox用在列寬度的設定應該是最好的.  flex:1表示一份
        type : 'hbox',
        align : 'stretch'
    },
    columns : [ {
        header : '編號',
        flex : 1,
        sortable : true,
        editor : {
            allowBlank : false              //是否允許爲空,默認編輯狀態下都是文本框,如果需要別的,需指定xtype類型,見時間和狀態列
        },
        dataIndex : 'ID'
    },  {
        header : '時間',
        flex : 1,
        sortable : true,
        renderer : Ext.util.Format.dateRenderer('Y-m-d'),             //指定時間的轉換格式
        field : {
            xtype : 'datefield',                        //指定編輯狀態下爲日期類型
            allowBlank : false,                     //是否爲空
            editable : false,                          //是否可以輸入
            format : 'Y-m-d',
            maxvalue : Ext.Date.format(new Date(), 'Y-m-d')                  //設定最大值爲當前時期.最小爲minvalue  默認爲value.輸入必須符合日期類型
        },
        dataIndex : 'TIME'
    }, {
        header : '狀態',
        flex : 1,
        sortable : true,
        editor : {
            xtype : 'combobox',                              //指定編輯狀態下爲下拉菜單
            store : state,                                         //綁定下拉菜單數據源
            editable : false,                                   //是否可以輸入
            displayField : 'STATE',                      
            queryMode : 'local',                            //local指定爲本地數據  如果是後臺傳輸  值爲remote
            allowBlank : false
        },
        dataIndex : 'STATE'
    } ],
    plugins : [ CellEditing ],                           //綁定編輯對象
    viewConfig : {
        forceFit : true,
        scrollOffset : 0

    }
});