Ext JS Containers and Layouts — Managing Component Arrangement

In this tutorial, you will learn about Ext JS Containers and Layouts. We cover key concepts, practical examples, and best practices to help you master this topic.

Ext JS containers hold and arrange child components using layouts that control positioning, sizing, and responsiveness without manual CSS calculations.

What You'll Learn

• Container vs component distinction
• Using fit, hbox, vbox, border, card, and column layouts
• Nesting layouts for complex arrangements
• Responsive layout with flex and regions
• Custom layout configurations

Why It Matters

Manual CSS layout is time-consuming and produces inconsistent results across browsers. Ext JS layouts handle sizing and positioning automatically, adjusting when the container resizes or children change.

Real-World Use

An admin panel with a border layout (header, sidebar, content area), where the content area uses a card layout for tabbed views, and each card uses vbox/hbox for internal arrangement.

Layout Types

flowchart TD
    A[Layouts] --> B[Fit]
    A --> C[HBox/VBox]
    A --> D[Border]
    A --> E[Card]
    A --> F[Column]
    B --> G[Single child fills container]
    C --> H[Horizontal/Vertical stacking]
    D --> I[North/South/East/West/Center]
    E --> F[Tabbed/Card switching]
    F --> G[Column-based grid]
    style A fill:#e6f3ff,stroke:#4a90d9,stroke-width:2px

Fit Layout

The fit layout stretches a single child to fill the entire container:

Ext.create('Ext.panel.Panel', {
  title: 'Fit Layout',
  width: 400,
  height: 300,
  layout: 'fit',
  items: {
    xtype: 'panel',
    html: 'This child fills the entire parent',
    bodyPadding: 10
  },
  renderTo: Ext.getBody()
});

Expected output: The inner panel fills all available space in the outer panel, leaving only the title bar and border.

HBox and VBox Layouts

HBox arranges children horizontally, VBox vertically:

Ext.create('Ext.panel.Panel', {
  title: 'HBox Layout',
  width: 600,
  height: 200,
  layout: {
    type: 'hbox',
    align: 'stretch',    // Stretch children vertically
    pack: 'start'        // Align to the start (left)
  },
  items: [{
    xtype: 'panel',
    title: 'Fixed Width',
    width: 150,
    html: 'Fixed 150px'
  }, {
    xtype: 'panel',
    title: 'Flexible',
    flex: 1,
    html: 'Takes remaining space'
  }, {
    xtype: 'panel',
    title: 'Flex 2',
    flex: 2,
    html: 'Takes 2x the space'
  }],
  renderTo: Ext.getBody()
});

Expected output: The first panel is 150px wide. The remaining space is divided between the second (1/3) and third (2/3) panels based on flex values.

Border Layout

The border layout divides a container into five regions:

Ext.create('Ext.panel.Panel', {
  title: 'Border Layout',
  width: 800,
  height: 600,
  layout: 'border',
  items: [{
    region: 'north',
    height: 60,
    split: true,
    html: '<h2>Header</h2>'
  }, {
    region: 'south',
    height: 40,
    split: true,
    html: '<p>Footer</p>'
  }, {
    region: 'west',
    width: 200,
    split: true,
    collapsible: true,
    title: 'Sidebar',
    html: 'Navigation'
  }, {
    region: 'center',
    html: '<h1>Main Content</h1>'
  }],
  renderTo: Ext.getBody()
});

Expected output: North (top) and south (bottom) span the full width. West (left) takes 200px with a splitter. Center fills the remaining space. Regions are resizable and the west panel is collapsible.

Card Layout (Tab Panels)

Card layout shows one child at a time, switching via layout.setActiveItem():

var cardPanel = Ext.create('Ext.panel.Panel', {
  title: 'Card Layout',
  width: 500,
  height: 350,
  layout: 'card',
  bbar: [{
    text: 'Previous',
    handler: function() {
      var layout = cardPanel.getLayout();
      layout.prev();
    }
  }, {
    text: 'Next',
    handler: function() {
      var layout = cardPanel.getLayout();
      layout.next();
    }
  }],
  items: [{
    html: '<h2>Step 1</h2><p>Welcome to the wizard</p>'
  }, {
    html: '<h2>Step 2</h2><p>Configuration options</p>'
  }, {
    html: '<h2>Step 3</h2><p>Confirmation</p>'
  }],
  renderTo: Ext.getBody()
});

Expected output: Only one card is visible at a time. Previous and Next buttons cycle through the cards.

Column Layout

Column layout creates a multi-column grid:

Ext.create('Ext.panel.Panel', {
  title: 'Column Layout',
  width: 600,
  height: 300,
  layout: 'column',
  items: [{
    columnWidth: 0.5,
    html: 'Column 1 (50%)',
    bodyPadding: 10
  }, {
    columnWidth: 0.3,
    html: 'Column 2 (30%)',
    bodyPadding: 10
  }, {
    columnWidth: 0.2,
    html: 'Column 3 (20%)',
    bodyPadding: 10
  }],
  renderTo: Ext.getBody()
});

Expected output: Three columns fill the container: 50%, 30%, and 20% width. Column widths are specified as fractional values.

Absolute and Anchor Layouts

// Absolute layout - position by x/y coordinates
Ext.create('Ext.panel.Panel', {
  title: 'Absolute Layout',
  width: 500,
  height: 300,
  layout: 'absolute',
  items: [{
    x: 50, y: 50,
    width: 100, height: 50,
    html: 'Positioned'
  }, {
    x: 200, y: 100,
    width: 150, height: 80,
    html: 'Also positioned'
  }],
  renderTo: Ext.getBody()
});

// Anchor layout - size relative to container
Ext.create('Ext.panel.Panel', {
  title: 'Anchor Layout',
  width: 500,
  height: 300,
  layout: 'anchor',
  defaults: {
    anchor: '100%'  // Width = 100% of container
  },
  items: [{
    anchor: '50%',  // Override: 50% width
    html: 'Half width'
  }, {
    html: 'Full width (defaults to 100%)'
  }],
  renderTo: Ext.getBody()
});

Common Mistakes

1. Not specifying a layout - Default layout is auto, which does not manage child sizing. Always specify an explicit layout.

2. Over-nesting layouts - Each container adds rendering overhead. Use a single layout with multiple items instead of nesting containers unnecessarily.

3. Confusing align and pack in box layouts - align controls perpendicular alignment (vertical in hbox, horizontal in vbox). pack controls primary axis alignment (horizontal in hbox, vertical in vbox).

4. Not using flex for responsive sizing - Fixed widths break on resize. Use flex values for proportional sizing that adapts to container changes.

5. Forgetting to set region in border layout - Children without a region property in a border layout cause errors. Each child must declare which region it occupies.

Practice Questions

1. What layout would you use for a single child that should fill its container?
2. How do you create a layout with a fixed sidebar and flexible content area?
3. What is the difference between hbox and vbox layouts?
4. How does card layout differ from tab panel?
5. What does the flex property do in box layouts?

Challenge: Build a complex page layout with a two-column header (logo + user info), a three-level sidebar (collapsible), a main content area with tabs, and a status bar footer. Use nested border, hbox, and card layouts.

FAQ

Mini Project

Build a responsive application shell with: a top toolbar (fixed height), a left sidebar (collapsible, 250px), a center area with tabbed panels, and a bottom status bar. Use border layout nested with hbox and card layouts.

What's Next

Layouts arrange components. Learn how the Ext JS data package manages, stores, and synchronizes application data with the server.