Layouts in Extjs

This is a quick overview of layouts in ExtJS.

 


 absolute

 

extjs_layout_image001

 

The absolute layout positions an element using x,y coordinates.

This type of layout should be avoided, as resizing the panel will not resize the components. Only use it if you know what you are doing, and you know why you are doing it.

 


 accordion

extjs_layout_image002

Allows slider layout. Most famously used in Microsoft Outlook.

A number of other options like ‘animate’ and ‘activeOnTop’ offer some interesting effects.

 


 anchor

extjs_layout_image003

This layout anchors components to the edge of a container. Useful for forms. Takes string of two values that can be percent or offset pixels (as a negative number). For example, anchor: ‘50% -400’ will always be 50% wide from the left and -400 pixels from the bottom.

All components are anchored to the top left corner.

It is best used in conjunction with a hbox layout. The hbox defines a number of columns, and the anchor layout can lay out the components inside each of these columns.

Appears to ignore sizing of non-container components like labels.

 


 border

extjs_layout_image004

For java developers very similar to BorderLayout in Swing. Useful for your application foundation, where you have a footer on the bottom, a navigation tree on the left, a header on top, and an editor in the middle.

If no width or height is defined for a container, then it will go down the hierarchy to find the widest element. In the above example, the west panel will have a width of 90 because a child element has its width set to 90. If another element is defined in this panel that is wider, then the panel will be set to the width of that element.

This layout is great, and should be the foundation for all your applications.

collapsable and split modes are a couple of interesting options.

 


 card

extjs_layout_image005

For java developers, it’s just like Cardlayout in Swing.

Extjs has two flavours: wizard and tab. A tabbed panel is just a panel with a navigation tool above the panel. A wizard is a panel with ‘next’ and ‘back’ buttons usually on the bottom of the panel.

 


 column

extjs_layout_image006

A Column layout defines a number of columns using percent or fixed width. Fixed width is calculated first, then percent.

Percentage values are calculated from the remainder after the fixed width elements have been added.

I wouldn’t bother too much with this layout. It is more or less deprecated as the hbox layout can fulfill everything that it does plus some more.

More info here.

 


 fit

This layout is very simple. It just fits component into container. It is basically the same as border layout, but with only the center part.


 form

extjs_layout_image007

All elements are stretched across horizontally from top to bottom. If a fieldLabel exists, then a label will be added to the left of the component. The label will not be stretched, but the corresponding component will be stretched until reaching the labels minimum width.

A large number of forms can be done using this layout.

 


 hbox

Aligns components along the horizontal axis. Used with the flex attribute. Flex is a ratio but represented as an integer number. The below example puts a next to b, but b will take up 75% of the space.

Fixed height items can also be added. Use align : ‘stretch’ or the components will anchor themselves to the left of the container.

 


 table

extjs_layout_image008

Starts at top left corner and lays out component left to right based on the column value.

The table layout is not a sizing layout. Its cells expand depending on the components added. The cells ‘push out’ if you will. A layout like column or hbox will explicitly set the column widths, however this layout will not.

The attributes colspan and rowspan can be used to make cells stretch over more than one cell.


 vbox

same as hbox but vertical! That’s all there is to say about this one.

 


Posted in extjs | Tagged | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

THREE_COLUMN_PAGE