extjs4 - 在视口面板中显示 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

因为没有什么可以告诉西区它是由什么类型的组件构成的，所以你渲染的是 default Ext.panel.Panel，而不是Ext.tree.Panel.

包括xtype: 'treepanel'西面板的配置。