当内联定义TreePanel的存储时，无法看到树节点的文本

Question

我遇到的问题是，在定义带有内联存储的TreePanel时，我看不到树节点的文本。但是，如果我将商店定义外部化并将其移动到单独的变量然后按照API文档中的说明分配给TreePanel，那么它的工作原理非常好。

以下是TreePanel的代码片段及其呈现时的样子截图：

    Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [ {
                    xtype: 'treepanel',
                    title: 'My Tree Panel',
                    displayField: 'text',
                    store: {
                      "id" : "xwt-gen-92bb1629-2cfe-43c1-a40a-a8a2c4e26562",
                      "owners" : ["booktaxi.tree"],
                      "storeId" : "xwt-gen-6310be92-f272-4926-8392-ed0eacd04952",
                      "fields" : [],
                      "root" : {
                        "children" : [{
                            "children" : [],
                            "expandable" : false,
                            "id" : "775aa413-72af-4708-b2f1-8852a660cd0a",
                            "leaf" : true,
                            "root" : false,
                            "text" : "detention"
                          }, {
                            "children" : [{
                                "children" : [],
                                "expandable" : false,
                                "id" : "f2cbb9c3-c177-4870-a2f2-dceb54a781ab",
                                "leaf" : true,
                                "root" : false,
                                "text" : "book report"
                              }, {
                                "children" : [],
                                "expandable" : false,
                                "id" : "a4550d10-385e-4c2e-b6da-9f439cab8bd4",
                                "leaf" : true,
                                "root" : false,
                                "text" : "alegrbra"
                              }
                            ],
                            "expandable" : true,
                            "id" : "ba8910a3-7e3f-4959-bcd0-9b3c102c40d4",
                            "leaf" : false,
                            "root" : false,
                            "text" : "homework"
                          }, {
                            "children" : [],
                            "expandable" : false,
                            "id" : "4f855b01-24ab-400a-ad7d-0dff14ca9710",
                            "leaf" : true,
                            "root" : false,
                            "text" : "buy lottery tickets"
                          }
                        ],
                        "expanded" : true,
                        "id" : "a7d67f78-1a32-4077-8ce3-778b40de1835",
                        "leaf" : false,
                        "root" : true,
                        "text" : ""
                      },
                      "xtype" : "store.tree"
                    },
                    viewConfig: {

                    }
                }
            ]
        });

        me.callParent(arguments);
    }
});

我想知道是否有人之前遇到过这个问题，是否有办法解决这个问题。

Answer 1

您应该在商店定义中指定fields，因为您没有明确指定模型。

Answer 2

为 displayField 重命名 dispalyField ：

Ext.applyIf(me, {
            items: [ {
                    xtype: 'treepanel',
                    title: 'My Tree Panel',
                    dispalyField: 'text', <---- ** displayField **

编辑：

在树上查看：

this.columns = [{
    header      : "Name header 1",
    xtype       : 'treecolumn',
    iconCls      : '',
    dataIndex   : 'index1',
    flex        : 1
},{
    header      : "Name header 2",
    dataIndex   : 'index2'
},{
    header      : "Name header 3",
    dataIndex   : 'index3'
},{
    header      : "Name header 4",
    dataIndex   : 'index4'
},{
    header      : "Name header 5",
    dataIndex   : 'index5'
}];

dataIndex 需要在定义的数据上使用相同的名称。

"children" : [{
    index1  : 'file', // Father name
    index2  : 'data1'
    ...
    children : [{
                    index1           : 'children file',
                    index2  : 'children data1',
                    ...
                    leaf : true
                }]
}]