javascript - 如何在 ExtJS 中的 TreeGrid 的树节点中显示文本

Question

我正在尝试在树状网格中显示文本。我可以使用根对象获得正确的数据“形式”。但我在显示文本时遇到问题，无论是在节点旁边还是在相应的表列中。

我的代码如下所示:

        Ext.onReady (function () {

            var treePanel = new Ext.tree.TreePanel({
                title: ' ',
                width: 900,
                height: 300,
                renderTo: Ext.getBody(),
                rootVisible: false,
                singleExpand: true,
                columns: [{
                    xtype: 'treecolumn',
                    text: 'Outlet',
                    dataIndex: 'outlet'
                },{
                    text: 'Mc Area',
                    dataIndex: 'mcarea'
                }
                ],
                root: {
                    children: [
                        {
//                            text: 'Outlet Group 1', ??
                            outlet: "Outlet Group 1",
                            mcArea: "Latin America",

                            children: [
                                {
                                    outlet: "Outlet 1",
                                    mcArea: "Argentina"

                                },{
                                    text: "Outlet 2",
                                    mcArea: "Chile"
                                }
                            ]
                        },
                        {
                            text: "Outlet Group 2"
                        }
                    ]
                }
            });
        });

但这就是我所看到的:

即。没有文本值。我假设数据结构中的 'outlet' 将与列中的 'outlet' dataIndex 匹配。

Answer 1

对于树网格，您需要使用 TreeStore相应的Model ，它定义了字段 outlet。您的root 可以移动到商店的配置:

store: Ext.create('Ext.data.TreeStore', {
    root: {
        children: [
            {
                outlet: "Outlet Group 1",
                mcArea: "Latin America",

                children: [
                    {
                        outlet: "Outlet 1",
                        mcArea: "Argentina"

                    },{
                        text: "Outlet 2",
                        mcArea: "Chile"
                    }
                ]
            },
            {
                text: "Outlet Group 2"
            }
        ]
    },
    // model is created inline by the store
    fields: [
        {name: 'outlet', type: 'text'}
    ]
})

root树面板上的配置仅适用于简单的树，并将创建具有简约模型的树存储，但不适用于自定义数据字段。