单击tree.Panel中的项目时加载新的panel.Panel

Question

我是ExtJS的新手 每当我点击tree.Panel

中的项目时，我都需要加载新的面板

以下是我的代码创建新面板（默认情况下）

var contentPanel = Ext.create('Ext.panel.Panel', {
        id: 'content-panel',
        region: 'center',
        layout: 'card',
        activeItem: 0,
        border: false,
        items: [dict_modules['profiles-area']]
    });

此代码用于创建tree.Panel

var treePanel = Ext.create('Ext.tree.Panel', {
        id: 'tree-panel',
        store: store,
        height: '100%',
        rootVisible: false
    });

这是我的tree.Panel

的点击处理程序

treePanel.getSelectionModel().on('select', function(selModel, record){
    if (record.get('leaf')) {
        contentPanel.removeAll(true);
        contentPanel.add([dict_modules[record.data.id + '-area']]);
        contentPanel.doLayout();
    }
});

当我的应用加载时，它看起来像这样

一旦我点击“特色”，它就像这样（好吧（!!!））

但是（!!!），一旦我点击“个人资料”，它看起来像这样（为什么????）

在“内容面板”之上，您可以看到一些内容

如果我再次点击“专业”，它看起来像这样（为什么???）

顶部没有线条！为什么？？？我做错了什么？

Answer 1

此代码解决了问题

treePanel.getSelectionModel().on('select', function(selModel, record) {
    if (record.get('leaf')) {
        Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-area');
    }
});