在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();
    }
});

加载我的应用程序时，它看起来如下所示

​

一旦我点击“专业”，它看起来像这样(好吧(！))

​

但是(！)，一旦我点击"Profiles"，它看起来就像这样(为什么？)

在"content-panel“的顶部，你可以看到一些行

​

如果我再次点击“专业”，它看起来像这样(为什么？)

上面没有线条！为什么？我做错了什么？

​

Answer 1

这段代码解决了问题

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