javascript - Extjs - 在属性网格中显示嵌套对象
问题描述
我正在尝试在propertygrid
嵌套级别的 JSON 结构中显示我的 JSON。根据属性网格文档,支持的唯一类型是布尔、字符串、日期、数字。所以我只能看到扁平级别信息而不是嵌套对象。
想知道是否有任何配置propertygrid
可以让我显示和编辑嵌套信息?或任何其他可用的组件,这将是有帮助的,而不是propertygrid
下面是示例配置和小提琴:
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",
leaf: true
}, {
text: "maxValue",
value: 10,
leaf: true
}, {
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()
});
推荐阅读
- php - 如何使用 NodeJS Crypto Package 从 PHP 中解密加密数据
- python - 获取熊猫中唯一列值的日期索引
- php - 匹配多行 HTML 块,为什么这么贪?
- sql-server - BIML AdoNetConnection 与 Oracle.ManagedDataAccess 无法验证
- python - (A, B) 和 (C,) 之间的闵可夫斯基距离
- javascript - 使用 javascript 将 contentEditable 保存到 html 文件中
- .htaccess - 许多页面的重复内容问题
- php - 为什么 crontab PHP 脚本执行与 CLI 不同?
- python - Flask SQLAlchemy 从查询结果中的两个连接映射实体中获取列
- sql - 选择最近 3 条记录