From Learn About the Ext JavaScript Library

Ext Manual > Widgets > Layouts >

Ext.BorderLayout

Examples

Example 1

var layout = Ext.BorderLayout.create(
  {center: {
    margins:{left:3,top:3,right:3,bottom:3},
    panels: [new Ext.GridPanel(grid)]
  }},
  'grid-panel');

Example 2

var layout = new Ext.BorderLayout(document.body, {
    north: {
        initialSize: 25,
        titlebar: false
    },
    west: {
        split:true,
        initialSize: 200,
        minSize: 175,
        maxSize: 400,
        titlebar: true,
        collapsible: true
    },
    east: {
        split:true,
        initialSize: 202,
        minSize: 175,
        maxSize: 400,
        titlebar: true,
        collapsible: true
    },
    south: {
        split:true,
        initialSize: 100,
        minSize: 100,
        maxSize: 200,
        titlebar: true,
        collapsible: true
    },
    center: {
        titlebar: true,
        autoScroll:true,
        resizeTabs: true,
        minTabWidth: 50,
        preferredTabWidth: 150
    }
});

// shorthand
var CP = Ext.ContentPanel;

layout.beginUpdate();
layout.add("north", new CP("north", "North"));
layout.add("south", new CP("south", {title: "South", closable: true}));
layout.add("west", new CP("west", {title: "West"}));
layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
layout.getRegion("center").showPanel("center1");
layout.endUpdate();

Links

• BorderLayout documentation
• Cross-browser Web 2.0 Layouts: part 1 and part 2
• Tutorial:Using Layouts with Ext - Part 1
• Example code:
  • Array Grid Example
  • Editor Grid Example
  • Ext Dependency Builder
  • Photo Organizer Example
  • Simple Layout Example
  • Nested Layouts Example
  • Complex Layout Example
  • Feed Viewer Example