How to show content in layout after click tree node

[oncom]

Hello everybody,
i am stuck here.

i have a tree like this

MyTree.js

var store = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'application/controllers/itemlist.php',
        node: 'id'
    },
    root: {
        text: 'Root Node',
        id: 'root_node',
        expanded: true
    }
});


var treePanel = Ext.create('Ext.tree.Panel', {
    id: 'tree-panel',
    region:'north',
    autoHeight: true, 
    minSize: 150,
    rootVisible: false,
    border: false,
    flex: 3,
    store: store
});


var detail = Ext.create('Ext.panel.Panel', {
    title: 'Details',
    region: 'south',
    height: 240,
    border: false,
    bodyStyle: 'padding: 5px;',
    autoScroll: true,
    flex: 1,
    html: '<p style="margin: 5px;">When you select a layout from the tree, additional details will display here.</p>'
});    


Ext.define('AM.view.layout.MyTree', {
    extend: 'Ext.container.Container',
    alias: 'widget.mytreepanel',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [ treePanel, detail ]
});

the tree is in region 'west', so when i click the node tree, i want to display tab panel in the center.

for code in the tab panel is

MyContent.js

Ext.define('AM.view.layout.MyContent', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.contentpanel',
    
    activeItem: 0, 
    layout: {
        type: 'card',
        deferredRender: true
    },
    border: false,
    region: 'center'
});

how do i make it happen?

[mitchellsimoens]

I see you are using the region config but then using vbox layout. The region config will only work for border layout. You can add/remove items to a center region of a border layout.

[oncom]

thank you a lot, Mitchell. finally fix this problem.