在视口面板中显示TreeStore

Question

我是ExtJS的新手，我正在尝试在西部地区创建一个带有导航树的视口。我无法弄清楚为什么以下代码渲染视口，而不是树;有人可以帮忙吗？

Ext.onReady(function() {

    var navTree = Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root Node',
            expanded: true,
            children: [
                {
                    text: 'Child 1',
                    leaf: true
                },
                {
                    text: 'Child 2',
                    leaf: true
                }
            ]
        }
    });

    var vp = Ext.create('Ext.Viewport', {
        layout: 'border',
        defaults: {
            frame: true,
            split: true
        },
        items: [
            {
                id: 'titlePanel',
                height: 40,
                region: 'north'
            },
            {
                id: 'navPanel',
                store: navTree,
                width: 250,
                region: 'west',
                title: 'West Region',
                collapsible: true
            },
            {
                id: 'bodyPanel',
                region: 'center',
                title: 'Center Region'
            }
        ]
    });
});

Answer 1

因为没有什么可以告诉西部地区它是由哪种组成的，所以你渲染默认的Ext.panel.Panel，而不是Ext.tree.Panel。

为西部小组添加xtype: 'treepanel'个配置。