How can I implement extjs nested border layout?

Question

I am working on an app that has 5 panels on top of each other. I want to use the layout:'border' so that I can take advantage of split:true config. Imagine a table with 5 rows each re-sizable and representing a panel.

Example:

frame: false,
width: 700,
border: false,
height: 600,
stateful: false,
layout: 'fit',
items: 
{
    layout: 'border',
    items:
    [
        {
            region: 'north',
            split: true,
            minWidth: 350,
            border: false,
            frame: false,
            layout: 'fit',
            title:'NNNNN',           
            margins: '0 0 0 0',
            items: []
        },
        {
            region: 'center',
            split: true,
            minWidth: 350,
            border: false,
            frame: false,
            layout: 'fit',
            title:'AAAAA',           
            margins: '0 0 0 0',
            items: 
            {
                layout: 'border',
                items:
                [
                    {
                        region: 'north',
                        .......
                    },
                    {
                        region: 'center',
                        .......
                    },
                    {
                        region: 'south',
                        ..........
                    }
                ]
            }
        },
        {
            region: 'south',
            split: true,
            minWidth: 350,
            border: false,
            frame: false,
            layout: 'fit',
            title:'CCCCCCCC',           
            margins: '0 0 0 0',
            items: []             
        }
    ]
} 

I was also thinking about using Resizer but I have another problem here. This is the class I was using in ExtJs 3.4 and it was working:

Ext.define('myapp.ResizablePanel', 
{
    extend         : 'Ext.panel.Panel',
    alias          : 'widget.reszpanel',

    handles        : 's',

    resizePanel: function()
    {
        this.syncSize();       
        this.updateLayout();
        if (this.layout) 
            this.doLayout(true, true);
    },

    onRender:function() 
    {
        this.callParent(arguments);

        this.resizer = new Ext.Resizable
        ({
            el: this.getEl(),
            handles: this.handles,
            minHeight: 120,
            maxHeight: 20000
        }).on("resize", this.resizePanel.bind(this));
    }
});

This was helpful, instead of xtype: 'panel', I was using xtype: 'reszpanel' and everything was working fine until I updated the code to ExtJS 4.2. Now this.syncSize() function does not exist in Components and I do not know which newer function does this. That is way tried to implement using border layout.

The problem is that when I have only one north, east, west, south, and center, everything is fine. But when I try to nest layouts, the code breaks. Any help? Thanks

Answer 1

You can have multiple panels with region 'north', you just need to make sure to have exactly one center panel. Nesting panels is bad for performance, so you should try to avoid that if possible.

{
    xtype: 'container',
    layout: 'border',
    items: [{
        xtype: 'panel',
        region: 'north',
        title: 'North 1',
        split: true
    },{
        xtype: 'panel',
        region: 'north',
        title: 'North 2',
        split: true
    },{
        xtype: 'panel',
        region: 'north',
        title: 'North 3',
        split: true
    },{
        xtype: 'panel',
        region: 'center',
        title: 'Center'
    }]
}

Also refer to the notes on the border layout in the documentation.