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'
        }

    }
});

yes currently no examples are working – wahab memon Jul 01 '21 at 12:36 — wahab memon, Jul 01 '21 at 12:36

score 1 · Accepted Answer · answered Jul 01 '21 at 20:00

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

Thank You for the answer, but is there any other approach instead of `treepanel`. I would like to avoid it only this component. — wahab memon, Jul 02 '21 at 05:00
Hm, I don't know any other representation of nested object as a tree. Why would you like to avoid tree component? — Arthur Rubens, Jul 02 '21 at 07:17
By avoiding I meant that I had kept it as a last option for displaying the JSON in nested tree structure. `Propertygrid` was giving a flexibility of taking entire json and avoiding the creation of stores as it created internally but displays flat levels structure other than that tree is also a option. Just wanted to know the available options and you have given the answer for it. — wahab memon, Jul 02 '21 at 13:59
Treegrid doesn't work for you? https://fiddle.sencha.com/#fiddle/hrm&view/editor — Fabio Barros, Jul 03 '21 at 05:30

Extjs - Display nested objects in Property grid

1 Answers1