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 : '时间',?? ??? ?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 : '状态',?? ??? ?editor : { ?? ??? ??? ?xtype : 'combobox',????????????????????????????? //指定编辑状态下为下拉菜单 ?? ??? ??? ?store : state,???????????????????????????????????????? //绑定下拉菜单数据源 ?? ??? ??? ?editable : false,?????????????????????????????????? //是否可以输入 ?? ??? ??? ?displayField : 'STATE',?????????????????????? ?? ??? ??? ?queryMode : 'local',??????????????????????????? //local指定为本地数据? 如果是后台传输? 值为remote ?? ??? ??? ?allowBlank : false ?? ??? ?},?? ??? ?dataIndex : 'STATE' ?? ?} ],?? ?plugins : [ CellEditing ],?????????????????????????? //绑定编辑对象 ?? ?viewConfig : { ?? ??? ?forceFit : true,?? ??? ?scrollOffset : 0 ?? ?} });