Tuesday, July 6, 2010

Glimpse of Ext js Containers

Container layout:
  • The Container layout is the default layout for any instance of Container and simply places items on the screen, one on top of.
  • Container layout does not explicitly resize child items.
  • It also serves as the base class for all other layouts
  • Implementing a container layout is extremely simple, requiring you to just add and remove child items.
Anchor Layout:
  • The Anchor layout is similar to the Container layout
  • It adds dynamic sizing to the mix using an anchor parameter specified on each child
{title : 'Panel1',
anchor : '100%,5%',
frame : true}

Form Layout:
  • The form layout is just like the anchor layout
Absolute layout:
  • Absolute layout is by far one of the simplest to use. It fixes the position of a child by setting the CSS “position” attribute of the child’s element to “absolute” and sets the top and left attributes to the x and y parameters
Fit Layout:
  • The ‘fit’ layout forces a Container’s single child to “fit” to its body and is, by far, the simplest of the layouts to use
  • The fit layout is a great solution for a seamless look when a Container has one child.
Accordion Layout:
  • The Accordion layout, a direct descendant of the fit layout, is useful when you want to display multiple Panels vertically stacked, where only a single item can be expanded or contracted.
  • One important to note that the accordion layout can only function well with Panels and two of its descendants, GridPanel and TreePanel. This is because the Panel (and the two specified subclasses) has what is required for the accordion to function properly. If you desire anything else inside of an accordion such as a tab panel, simply wrap a panel around it and add that panel as a child of the Container that has the accordion layout.
Card Layout:
  • In order to create a wizard-like interface, we need to create a method which we can control the card flipping
Column Layout:
  • Like the Anchor layout, the Column layout allows you to set the absolute or relative width of the child Components
  • Organizing components into columns allows you to display multiple components in a Container side by side.
  • The meat of the Column layout its onLayout method, which calculates the dimensions of the Container’s body
  • it first subtracts the width of each of the absolute-width child components from the known width of the containers body
  • Now that the Column layout knows exactly how much horizontal space it has left, it can set the size of each of the child components based on the percentage
HBox and VBox layouts:
  • behavior is very similar to the Column model
  • you can change the alignment of the child items both vertically and horizontally
  • ability to allow the columns or rows to stretch to their parent’s dimensions if required
  • to properly exercise the different layout configuration parameters for which we can specify two, pack and align. Where pack means “vertical alignment” and align means “horizontal alignment”.
  • The pack parameter accepts three possible values; start, center and end.
  • The align parameter accepts four possible values: ‘top’, ‘middle’, ‘stretch’ and ‘stretchmax’.
  • The last configuration parameter that we must explore is “flex”, which is similar to the columnWidth parameter for the columnLayout and gets specified on the child items
  • Lets say for instance, you would like each of the columns to have equal widths. Simply set each column’s flex to the same value, and they will all have equal widths.
The Table layout:
  • The table layout gives you complete control over how you want to visually organize your components.
  • Building a table of Ext Components however, is different as we specify the content of the table cells in a single dimension array, which can get a little confusing.
  • we set a layoutConfig object, which sets the number of columns with "columns :" property.
  • Often we need sections of the table to span multiple rows or multiple columns. To accomplish this, we specify either the rowspan or colspan parameters explicitly on the child items.
The Border layout:
  • The Border Layout made its d├ębut in 2006, back when Ext was merely more than an extension to the YUI Library and has matured into an extremely flexible and easy to use layout that provides full control over its sub-parts or “regions”. These regions are aptly named by polar coordinates: north, south, east, west and center.
ref: Ext Js in Action

No comments:

Post a Comment