PropertyGrid扩展自EditorGridPanel,所以可以直接编辑右边的内容。注意:只有右边,即使你单击左边,编辑器也只会出现再右边。
实际上,我们可以用散列表来形容PropertyGrid,左边可以看做Key,右边是Value。Key是我们指定好的,用户只需要修改对应的Value即可。对于某些属性而言,配置很方便。
17.1使用实例
代码:
varpropertyGrid =newExt.grid.PropertyGrid({
title:"属性面板",
width:500,
autoHeight:true,
el:Ext.getBody(),
source:{
"姓名":"张三",
"年龄":25,
"出生年月":new Date(Date.parse("1987/05/07")),
"是否有效":true,
"邮箱":"ex-zhangsan001@pingan.com.cn"
}
});
propertyGrid.render();
效果:
单击,你会发现是可以编辑的。String、Date、Numbers、Boolean都有对应的编辑器。
17.2让属性表格不可编辑
在beforeedit事件中设置e.cancel=true即可。
代码:
// 让属性表格不可编辑。
propertyGrid.on("beforeedit",function(e) {
e.cancel = true;
});
17.3获取属性表格的值
// 根据Name获得Value,即根据Key获取Value。
var name= propertyGrid.getStore().getById("姓名").get("value");
var age =propertyGrid.getStore().getById("年龄").get("value");
propertyGrid.getStore()返回Ext.data.Store
store.getById()返回Ext.data.Record
17.4自定义编辑器
当需要对编辑器进行详细的配置时,可以使用PropertyGrid的customEditors来自定义编辑器。
示例:
source:{
"姓名":"张三",
"年龄":25,
"出生年月":new Date(Date.parse("1987/05/07")),
"是否有效":true,
"邮箱":"ex-zhangsan001@pingan.com.cn",
"Start Time":"9:00"
},
customEditors:{
"Start Time":new Ext.Editor(new Ext.form.TimeField({
selectOnFocus:true
}))
}
再Source中增加了一项Start Time,自定义编辑器中增加了Start Time项的编辑器。
效果: