1、Ext.grid.PropertyGrid
主要配置项:
customEditors:自定义编辑器。内置编辑器有string、date、number、boolean
source:表格要显示的数据对象
主要方法:
getSource():取得数据源对象
setSource( Object source ):设置数据源对象,数据源格式如下:
grid.setSource({
"(name)": "My Object",
"Created": new Date(Date.parse('10/15/2006')),
"Available": false,
"Version": .01,
"Description": "A test object"
});
2、范例源码
var grid = new Ext.grid.PropertyGrid({
title: "PropertyGrid实例",
width: 300,
height: 300,
frame: true,
source: {
"员工名称": "张三",
"出生日期": new Date(1978, 01, 02),
"性别": "男",
"是否已婚": true,
"年龄": 31
},
customEditors: {
"性别": new Ext.grid.GridEditor(new Ext.form.ComboBox({
editable: false,
displayField: "sex",
mode: "local",
triggerAction: "all",
store: new Ext.data.SimpleStore({
fields: ["sex"],
data: [["男"], ["女"]]
})
})),
//内置的日期编辑器有bug,自定义日期字段的编辑器可解决
"出生日期": new Ext.grid.GridEditor(new Ext.form.DateField({
format: "Y年m月d日",
selectOnFocus: true,
allowBlank: false
}))
}
});
//内置的日期字段格式是”m/j/Y“,如果需要改变默认格式则要通过取得表格的列模式来实现
grid.getColumnModel().dateFormat = "Y年m月d日";
grid.render("div1");
主要配置项:
customEditors:自定义编辑器。内置编辑器有string、date、number、boolean
source:表格要显示的数据对象
主要方法:
getSource():取得数据源对象
setSource( Object source ):设置数据源对象,数据源格式如下:
grid.setSource({
"(name)": "My Object",
"Created": new Date(Date.parse('10/15/2006')),
"Available": false,
"Version": .01,
"Description": "A test object"
});
2、范例源码
var grid = new Ext.grid.PropertyGrid({
title: "PropertyGrid实例",
width: 300,
height: 300,
frame: true,
source: {
"员工名称": "张三",
"出生日期": new Date(1978, 01, 02),
"性别": "男",
"是否已婚": true,
"年龄": 31
},
customEditors: {
"性别": new Ext.grid.GridEditor(new Ext.form.ComboBox({
editable: false,
displayField: "sex",
mode: "local",
triggerAction: "all",
store: new Ext.data.SimpleStore({
fields: ["sex"],
data: [["男"], ["女"]]
})
})),
//内置的日期编辑器有bug,自定义日期字段的编辑器可解决
"出生日期": new Ext.grid.GridEditor(new Ext.form.DateField({
format: "Y年m月d日",
selectOnFocus: true,
allowBlank: false
}))
}
});
//内置的日期字段格式是”m/j/Y“,如果需要改变默认格式则要通过取得表格的列模式来实现
grid.getColumnModel().dateFormat = "Y年m月d日";
grid.render("div1");