Javascript 单击树中的项目时加载新面板.panel

我是ExtJS新手 我需要在每次单击树中的项目时加载新面板。面板

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

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

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

此代码用于创建tree.Panel

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

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

这是我的树面板的点击处理程序

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

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

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

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

但是（！！！），一旦我点击“配置文件”，它看起来是这样的（为什么？？）

在“内容面板”的顶部，您可以看到一些行

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

顶部没有线条！为什么？我做的不对吗？

---

此代码解决了问题

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