Ext属性表格控件——PropertyGrid

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,

"邮箱":"[email protected]"

}

});

 

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,

"邮箱":"[email protected]",

"Start Time":"9:00"

},

customEditors:{

"Start Time":new Ext.Editor(new Ext.form.TimeField({

selectOnFocus:true

}))

}

再Source中增加了一项Start Time，自定义编辑器中增加了Start Time项的编辑器。

 

效果：