border layout code breaking, not able to see the content

Question

• I have hbox layout, where in the left it shows tree and on the right it shows tabs.
• But the problem is I should not use hbox, but I should use border layout.
• When I use two column layout code is breaking.
• Providing my code with hbox layout.
• Can you guys tell me how to make the below code work in border layout.

https://docs.sencha.com/extjs/4.1.3/#!/api/Ext.layout.container.Border

I am trying to change border in the below part of code

var createTreeAndContentPanel = function(tree) {
        var retval,
            contentPanel;

Answer 1

According to docs, if you are using a "Border" layout, at least one of the child panel has to use region : "center". So you need to apply region : center on your panel containing tabs, and region : west to your panel containing tree.

Finally you need to add these 2 panels inside a parent panel with a layout: border

From doc :

Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.