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

    }
});