Extjs - 在 属性 网格中显示嵌套对象

Question

我试图在 propertygrid 中显示我的 JSON，其中嵌套了 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'
        }

    }
});

Answer 1

您可以使用可编辑的列树：

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()
});