CODEWITHSUNDEEP
javascriptextjs4extjs4.2
Winston
Winston

Reputation: 1805

Load new panel.Panel when click on items in tree.Panel

I'm new in ExtJS I need load new panel every time when I click on item in tree.Panel

Here is my code creating new panel (by default)

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

This code for creating tree.Panel

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

this is my click handler for 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();
    }
});

When my app is loaded, it looks like this enter image description here

Once I click on the "specialty" it looks like this (all right(!!!)) enter image description here

BUT(!!!), once I click on "Profiles", it looks like this (WHY????)

On top of "content-panel" you can see some line enter image description here

And if I again click on "Specialty", it looks like this (WHY???)

There are no lines at the top! Why??? What I'm do incorrect? enter image description here

Upvotes: 0

Views: 891

Answers (1)

Winston
Winston

Reputation: 1805

This code solved problem

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

Upvotes: 1

Related Questions