下面代码展现了表格中插入下拉列表框、时间控件、单选项等和验证数据。
Ext.onReady(function(){
var comboData = [
['0','新版ext教程'],
['1','ext在线支持'],
['2','ext扩展']
];
var cm = new Ext.grid.ColumnModel([{
header:'数字列',
dataIndex:'number',
editor:new Ext.grid.GridEditor(new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 10
}))
},{
header:'选择列',
dataIndex:'combo',
editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields:['value','text'],
data: comboData
}),
emptyText: '请选择',
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
readOnly:false
})),
renderer: function(value){
return comboData[value][1];
}
},{
header:'日期列',
dataIndex:'date',
editor:new Ext.grid.GridEditor(new Ext.form.DateField({
format: 'Y-m-d',
minValue: '2007-12-14',
disabledDays: [0, 6],
disabledDaysText: '只能选择工作日'
})),
renderer: function(value) {
return value.format("Y-m-d");
}
},{
header:'判断列',
dataIndex:'check',
editor:new Ext.grid.GridEditor(new Ext.form.Checkbox({
allowBlank: false
})),
renderer:function(value) {
return value ? '是' : '否';
}
}]);
// 放到grid里显示的原始数据
var data = [
[1.1,1,new Date(),true],
[2.2,2,new Date(),false],
[3.3,0,new Date(),true],
[4.4,1,new Date(),false],
[5.5,2,new Date(),true]
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'number'},
{name: 'combo'},
{name: 'date'},
{name: 'check'}
])
});
store.load();
var grid = new Ext.grid.EditorGridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
});
});
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。