Extjs - Display nested objects in Property grid

Question

I am trying to display my JSON in a propertygrid where I have nested level of JSON structure. As per to the property grid documentation the only types supported are boolean, string, date, number. So am only able to see the flatten level information and not the nested object.

Wanted to know if there is any configuration in propertygrid which will allow me to display and edit the nested information ? or any other component available which will be helpful instead of propertygrid

Below is the sample config and 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

You can use editable column tree:

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