Ext JS Lay outs




BASIC Layouts
i)Absolute - This is a simple layout style that allows you to position items within a container using CSS-style absolute positioning via XY coordinates.
ii)Accordian - Displays one panel at a time in a stacked layout. No special config properties are required other than the layout — all panels added to the container will be converted to accordion panels.
iii)Anchor- Provides anchoring of contained items to the container's edges. This type of layout is most commonly seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the container without hard-coding their dimensions
iv)Border- Border layouts can be nested with just about any level of complexity that you might need.Every border layout must at least have a center region. All other regions are optional.
v) Card Layout -A very simple layout that simply fills the container with a single panel. This is usually the best default layout choice when you have no other specific layout requirements. It can be divided into 2 types 1 is wizard and other is Tab Panel .
vi)Column Layout - This is a useful layout style when you need multiple columns that can have varying content height. Any fixed-width column widths are calculated first, then any percentage-width columns specified using the column Width config will be calculated based on remaining container width. Percentages should add up to 1 (100%) in order to fill the container.
vii)Fit layout - A very simple layout that simply fills the container with a single panel. This is usually the best default layout choice when you have no other specific layout requirements.
viii)Table - Outputs a standard HTML table as the layout container. This is sometimes useful for complex layouts where cell spanning is required, or when you want to allow the contents to flow naturally based on standard browser table layout rules.
ix)vBox
1)A layout that arranges items vertically down a Container. This layout optionally divides available vertical space between child items containing a numeric flex configuration.
2)This  layout that allows for the vertical and horizontal stretching of child items.
x)HBox-
1)A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal space between child items containing a numeric flex configuration.
2)This layout may also be used to set the heights of child items by configuring it with the align option.

You may check below link of Sencha for complete documentaion of layouts .
Sencha Ext Js Layouts documentaion Link

Previous
Next Post »

Pages