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

Posted 2023-03-14

【中文标题】Extjs - 在属性网格中显示嵌套对象

【英文标题】：Extjs - Display nested objects in Property grid

【发布时间】：2021-06-30 08:09:16

【问题描述】：

我试图在 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'
        

    
);

【问题讨论】：

Fiddle 挂了。

是的，目前没有示例有效

【参考方案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()
);

【讨论】：

感谢您的回答，但有没有其他方法可以代替treepanel。我想避免它只有这个组件。

嗯，我不知道嵌套对象作为树的任何其他表示形式。为什么要避免使用树组件？

通过避免我的意思是我将它保留为在嵌套树结构中显示 JSON 的最后一个选项。 Propertygrid 提供了获取整个 json 的灵活性，并避免在内部创建商店时创建商店，但显示除该树之外的平面级别结构也是一种选择。只是想知道可用的选项，而您已经给出了答案。

Treegrid 不适合您？ fiddle.sencha.com/#fiddle/hrm&view/editor