Extjs4.0可编辑窗口

EXTJS4.0 gridpanel 用法笔记～～可编辑的grid varCellEditing = Ext.create('Ext.grid.plugin.CellEditing', { // 列编辑模式 clicksToEdit : 1, //单击编辑单元格修改

autoCancel : false

});

varRowEditing = 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"

} ]

varcstore = 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

}

});