From Learn About the Ext JavaScript Library

This page is a beginner FAQ for using layouts with Ext. It will attempt to address common problems/questions.

Contents 1 Definitions 1.1 Static layouts 1.2 Dynamic layouts 2 Common Questions

Definitions

Component: A visual element, the base class for a majority of elements in Ext (Container, Panel, Grid, Tree).
Container: Extends component. As the name suggests, is composed of 0 or more components. The container holds the responsibility of displaying child components.
Layout: Layouts instruct containers on how to display the components inside the container.
Static Layout: These layouts cannot be changed once they are defined. New components cannot be added or removed after the container has been rendered.

Static layouts

• BorderLayout
• ColumnLayout
• ContainerLayout
• TableLayout

Dynamic Layout: These layouts can be changed once they are defined. New components can be added or removed after the container has been rendered.

Dynamic layouts

• AbsoluteLayout
• AnchorLayout
• CardLayout
• FitLayout
• FormLayout

Common Questions

01. I added a component to a container. When I try to render the component, I get an error. What gives?
You only render the outermost container. Anything inside the container is managed by the layout manager of the container.

var p = new Ext.Panel(
{
   title: 'Accordion',
   layout: 'accordion'
}
);
 
var child = new Ext.Panel(
{
   title: 'Item 1'
}
);
p.add(child);
child.render(); //WRONG!
p.doLayout(); //CORRECT!

02. I added a component to my container and nothing happens. Why?
After you add a component, you must indicate to the container that you've finished adding items and you want them to display. The reasoning behind this is that it gives you more control of when rendering takes place.

var p = new Ext.Panel(
{
   title: 'Accordion',
   layout: 'accordion'
}
);
 
var child = new Ext.Panel(
{
   title: 'Item 1'
}
);
p.add(child);
p.doLayout(); //Instruct the container to draw children

03. I called doLayout, I still don't see anything?
Are you sure you aren't trying to add an item to a static layout?

04. I want to replace the center region in my border layout, how do I do it?
Since the border layout is static, you can't just replace it. It is best to have the center region as a placeholder panel with a FitLayout. From here, add/remove your items from this panel to simulate changing the center.

new Ext.Viewport(
{
   layout: 'border',
   items:
   [
      {
         region: 'center',
         layout: 'fit', 
         id: 'placeHolder',
         items: 
         [
            {
               title: 'First Panel',
               id: 'first'
            }
         ]
      }
   ]
}
);
 
var holder = Ext.getCmp('placeHolder');
holder.remove('first');
holder.add(
{
   title: 'Second Panel',
   id: 'second'
}
);
holder.doLayout();