问题描述
我试图在我嵌套了 JSON 结构级别的 propertygrid
中显示我的 JSON。根据属性网格文档,唯一支持的类型是布尔值、字符串、日期、数字。所以我只能看到展平级别的信息,而不能看到嵌套的对象。
想知道 propertygrid
中是否有任何配置可以让我显示和编辑嵌套信息?或任何其他可用的组件代替 propertygrid
以下是示例配置和fiddle:
Ext.create('Ext.grid.property.Grid',{
title: 'Properties Grid',width: 300,renderTo: Ext.getBody(),source: {
"allowBlank": "My Object","minValue": 1,"maxValue": 10,"itemDetails": {
"name": "name 1","type": "Object"
},"Description": "A test object"
},sourceConfig: {
allowBlank: {
displayName: 'required'
}
}
});
解决方法
您可以使用可编辑的列树:
var store = Ext.create('Ext.data.TreeStore',{
root: {
expanded: true,children: [{
text: "allowBlank",value: "My Object",leaf: true
},{
text: "minValue",value: "1",{
text: "maxValue",value: 10,{
text: "itemDetails",value: "",expanded: true,children: [{
text: "name",value: "name 1",leaf: true
},{
text: "type",value: "Object",leaf: true
}]
},{
text: "Description",value: "A test object",leaf: true
}]
}
});
Ext.create('Ext.tree.Panel',{
title: 'Simple Tree',height: 200,store: store,rootVisible: false,plugins: {
cellediting: {
clicksToEdit: 2,listeners: {
beforeedit: function (editor,context,eOpts) {
if (!context.record.isLeaf()) {
return false;
}
var column = context.column;
switch (typeof context.record.get('value')) {
case "string":
column.setEditor({
xtype: 'textfield'
});
return;
case "number":
column.setEditor({
xtype: 'numberfield'
});
return;
//...
//...
default:
column.setEditor({
xtype: 'textfield'
});
return;
}
},}
}
},columns: [{
xtype: 'treecolumn',text: 'Headers',dataIndex: 'text'
},{
text: 'Value',dataIndex: 'value',editor: {
xtype: 'textfield'
}
}],renderTo: Ext.getBody()
});