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

如何解决Extjs - 在属性网格中显示嵌套对象

我试图在我嵌套了 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()
});