12 layout styles for layouts in ExtJS

ExtJS's container component can be set to its display style, its valid values are absolute, accordion, anchor, border, card, column, fit, form and table. Altogether 9 kinds.

Several other see: Http://www.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html inside there are detailed examples.

· Absolute, as the name implies, locates the display inside the container according to the specified coordinates.

This was a simple layout style that allows position items within a container using Css-style absolute Positioning VI A XY coordinates.

Sample Config:

Layout: ' absolute ', items:[{    ' Panel 1 '    ,        ' positioned at x:50, y:50 '}]

· Accordion This is the easiest to remember, the accordion effect

Ext.onready (function(){  varPanel=NewExt.panel (//Ext.formpanel is the panel with the form layout{renderto:' Paneldiv ', Title:' Container components ', layout:' Accordion ', Width:500, Height:200, Layoutconfig:{animate:false}, items:[{title:' Element 1 ', HTML: '}, {title:' Element 2 ', HTML: '}, {title:' Element 3 ', HTML: '}, {title:' Element 4 ', HTML: '}         ]        }       );  }); 

12 layout styles for layouts in ExtJS