ExtJS Layout Daquan

1.Fit layout

In the Fit layout, the child elements will automatically fill the entire parent container. Note: Under Fit layout, setting the width of its child elements is not valid . If more than one component is placed in the fit layout, only the first child element is displayed. In the Fit layout, the child elements will automatically fill the entire parent container. A typical case is when a client requires a grid component to be placed in a window or panel, the size of the grid component changes as the parent container changes size.

：

Example code:

ext.create (' Ext.container.Viewport 'fit '' Hello Ext 'hello! Welcome to Ext JS. ' }]});

2 Border Layout
Border layout: Border layout is also called the boundary layout, he separates the page into the five parts of West,east,south,north,center , we need to specify in their items to use region parameter to specify a specific location for its child elements . Note: The North and South sections can only be set to height (height), and the west and East sections can only be set to width. The North South West East area becomes larger and the center area becomes smaller.

The parameter split:true can be resized in addition to the center four area.

The collapsible:true parameter activates the collapse function,

The title must be set because the collapse button appears in the title section.

The center area must be used, and the center area does not allow folding. The Center area automatically fills the remaining space in other areas. especially in Extjs4.0, when you specify a layout of border, an error message appears when no center area is specified .

：

Example code:

Ext.create (' Ext.panel.Panel ', {width:1024, Height:720, layout:' Border ', items: [{region:' South ', Xtype:' Panel ', Height:20, Split:false, HTML:' Welcome to login! ', Margins:' 0 5 5 5 '},{Title:' West region is collapsible ', Region:' West ', Xtype:' Panel ', Margins:' 5 0 0 5 ', Width:200, Collapsible:true, ID:' West-region-container ', layout:' Fit '},{Title:' Center region ', Region:' Center ', Xtype:' Panel ', layout:' Fit ', Margins:' 5 5 0 0 ', HTML:' In Extjs4, the center area must be specified, or an error will be given. ‘}], RenderTo:Ext.getBody ()});

3 Accordion Layout

Accordion layout: Accordion layout is also known as the accordion layout, under the accordion layout, at any time, only one panel is active. Each of these polygon edges supports expansion and folding. Note: Only Ext.panels and all Ext.panel.Panel subkeys can use the accordion layout.

：

Example code:

Ext.create (' Ext.panel.Panel ', {title:' Accordion Layout ', Width:300, Height:300, x:20, y:20, layout:' Accordion ', defaults: {bodystyle:' padding:15px '}, Layoutconfig: {titlecollapse:false, animate:true, Activeontop:true}, items: [{title:' Panel 1 ', HTML:' Panel content! '},{Title:' Panel 2 ', HTML:' Panel content! '},{Title:' Panel 3 ', HTML:' Panel content! '}], RenderTo:Ext.getBody ()});

4 Card Layout

Card layout: This layout is used to manage multiple subcomponents, and only one subcomponent can be displayed at any time. The most common scenario for this layout is the Wizard mode , which is what we call distribution submissions . Card layouts can be created using layout: ' card '. Note: Because this layout itself does not provide a step-navigation capability, users need to develop the feature themselves. Since only one panel is displayed, at the beginning we can use the Setactiveitem feature to specify the display of one panel. When you want to display the next panel or the previous panel, we can use GetNext () or GetPrev () to get the next or previous panel. then use the Setdisabled method to set the display of the panel. Also, if the form layout is displayed in the panel, when we click on the next panel, we process the elements submitted in the form, and use Ajax to save the contents of the form in the database or session.
The following example code shows a basic card layout that does not contain form elements, and is handled according to the actual situation:

：

Instance code:

Ext.create (' Ext.panel.Panel ', {title:' Card Layout example ', Width:300, Height:202, layout:' Card ', Activeitem:0, x:30, y:60, Bodystyle:' padding:15px ', defaults: {border:false}, Bbar: [{ID:' Move-prev ', Text:' Back ', Handler:function(BTN) {Navigate (Btn.up ("Panel"), "prev"); }, Disabled:true},' and ', {ID:' Move-next ', Text:' Next ', Handler:function(BTN) {Navigate (Btn.up ("Panel"), "next"); }}], items: [{ID:' Card-0 ', HTML:' }, {ID:' Card-1 ', HTML:' <p>step 2 of 3</p> '}, {ID:' Card-2 ', HTML:‘‘}], RenderTo:Ext.getBody ()});

5 Anchor Layout

The anchor layout will cause the component to be pinned to a location in the parent container, and the components that use the anchor layout will have the dimensions of the anchor layout relative to the size of the container, that is, when the size of the parent container container changes.
The location and size are re-rendered. Anchorlayout layouts do not have any direct configuration options (except for inheritance), however, when using the Anchorlayout layout, their subcomponents have a anchor property that configures where this subassembly is located in the parent container. The Anchor property is a set of strings that can be represented by a percentage or a number . The configuration string is separated by spaces , for example
Anchor: ' 75% 25% ', representing a width of 75% for the parent container, and a height of 25% for the parent container
Anchor: '-300-200 ', indicating that the component has a right margin of 300 relative to the parent container, relative to the bottom bit 200 of the parent container
Anchor: '-250 20% ', mixed mode, representing the component of the party for the right side of the container is 250, and the height is 20% of the parent container

：

Example code:

Ext.create (' Ext.panel ', {width:500, Height:400, Title:"Anchor Layout", layout:' Anchor ', x:60, y:80, RenderTo:Ext.getBody (), items: [{xtype:' Panel ', Title:' 75% Width and 25% Height ', Anchor:' 75% 25% '},{xtype:' Panel ', Title:' Offset-300 Width & -200 Height ', Anchor:'-300-200 '},{xtype:' Panel ', Title:' Mixed Offset and Percent ', Anchor:'-250 30% '}]});

6.Absolute layout

The Absolute layout inherits the Ext.layout.container.Anchor layout and adds the X/y (horizontal ordinate) configuration options to the sub-component positioning , Absolute layout is designed to extend the layout's properties, Make layouts easier to use.

：

Example code:

Ext.create (' Ext.form.Panel ', {title:' Absolute layout ', Width:300, Height:275, x:20, y:90, layout:' Absolute ', DefaultType:' TextField ', items: [{x:10, y:10, Xtype:' Label ', Text:' Send to: '},{x:80, y:10, Name:' To ', Anchor:' 90% '},{x:10, y:40, Xtype:' Label ', Text:' Subject: '},{x:80, y:40, Name:' Subject ', Anchor:' 90% '},{x:0, y:80, Xtype:' Textareafield ', Name:' Msg ', Anchor:' 100% 100% '}], RenderTo:Ext.getBody ()});

7 Column Layout The column layout is generally referred to as the layout of columns, which is designed to create a multi-column format. The width of each column, which can be specified as a percentage or as a fixed width . The column layout does not have a direct configuration option (except for inheritance), but the column layout supports a ColumnWidth property that specifies the width of each panel during layout using ColumnWidth. Note: When using the column layout layout, all ColumnWidth values of its sub-panels must be in the range of 0~1 or percentage. Their sum should be 1. In addition, if any sub-panel does not specify a ColumnWidth value, it will fill the remaining space.

：

Example code:

Ext.create (' Ext.panel.Panel 'Column Layout-proportionally '), x:100, y , layout:' column 'column 1 ', ColumnWidth:. ' Column 2 ', ColumnWidth:. ' Column 3 ', ColumnWidth:. ], RenderTo:Ext.getBody ()});

ExtJS Layout Daquan