Creating a simple Border Layout

At times, building a simple thing can become tedious. Especially when you miss simple configurations that make huge impact! This is a back to basics article on how to code a simple border layout in an ExtJS panel.

Let’s make a simple panel with a border layout:

var panel = new Ext.Panel({
 renderTo: document.body,
            title: 'Border Layout',
            layout: 'border',
            width:700,
            height:400,
            items: [{
                region: 'north',
                layout: 'fit',
                frame: true,
                html: 'This is North!',
                height: 150
                
             },{
                region: 'west',
                layout: 'fit',
                frame: true,
                border: false,
                html: 'This is West!',
                width: 200,                
            }, {
                region: 'center',
                layout: 'fit',
                frame: true,
                width: 400,
                html: 'This is Center!',
                border: false
             }, {
                region: 'east',
                layout: 'fit',
                frame: true,
                border: false,
                html: 'This is East!',
                width: 200                
            },{
                region: 'south',
                layout: 'fit',
                frame: true,
                html: 'This is South!',
                height: 150
                
             }]
    });

There are few points to remember when working with border layout. I have listed few important points:

• When you use border layout, you should always have width and height of the panel defined. If these are not defined, the panel is not displayed properly.
• North & South region must have height information for proper display.
• East & West region must have width information for proper display.
• Center region is a must for the border layout.

Here is the screen shot of our simple panel:

Share your tips with me and keep coding :)

Read other ExtJS related articles!