extjs4 overlapping panels in border layout

Question

I am creating a Border layout using ExtJS4 MVC structure. I am defining north,west,center and south regions. All the regions are being displayed but the problem here is that, all the regions are starting at the top left corner of the screen so they are getting overlapped.

Can someone please help me get the border layout right,so that it fits the entire screen..??

Here is my code:

Border.js

            Ext.define('IN.view.item.Border',{
                extend : 'Ext.container.Container',
                alias : 'widget.myborderlyt',
                requires : [ 'Ext.layout.container.Border' ],
                title : 'Border layout',
                autoShow : true,

                defaults : {
                    split : true,
                    width : 800,
                    height : 900
                },
                layout : 'border',
                items : [
                        {
                            region : 'north',
                            xtype : 'panel',
                            title : 'North region title here',
                            html : 'Here is the north region..111111111111111111111111111'
                        }  ,
                        {
                            region : 'west',
                            xtype : 'panel',
                            title : 'west region',
                            html : 'Here is west...1222221111111111',
                            width : 150
                        },
                        {
                            region : 'center',
                            xtype : 'panel',
                            html : 'Center region....aaaaaaaaaeeeeeeeeeeeeeeeeetttttttttccccccccc'

                        } ,
                        {
                            region : 'south',
                            height : 60,
                            html : "South region ..ggggggggggggggggggggggg"
                        }

                ]
            });

app.js

Ext.Loader.setConfig({
enabled : true
});

Ext.application({
name : 'IN',
appFolder : 'app',
controllers : [ 'Items' ],
launch : function() {
    console.log('in LAUNCH-appjs');
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items : [ {
            xtype : 'myborderlyt'
        } ]
    });
}
});

score 0 · Accepted Answer · answered Aug 28 '14 at 17:23

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items : [ {
        xtype : 'myborderlyt'
    } ]
});

In this code snippet, viewport's layout is 'border' but its item doesn't have a 'region' config. This is what documentation says

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.

So either change 'border' to 'fit' in viewport or add region config to 'myborderlyt'.

items : [ {
        xtype : 'myborderlyt',
        region : 'center'

    } ]

extjs4 overlapping panels in border layout

1 Answers1