Seven la s of Extjs Study Notes

Extjs Layout Browser.

Extjs3.1.0 supports 17 types. Here are some important brief descriptions to see the results. Go to the link above and stop pasting. You can set Layout for a Panel in the same way.
1. AbsoluteLayout
The layout can be determined by the internal components of the Panel. It is specified by x and y.

Example usage:
Copy codeThe Code is as follows:
New Ext. Panel ({
Layout: 'absolute ',
Title: 'absulutelayout ',
RenderTo: document. body,
Frame: true,
DefaultType: 'textfield ',
Width: 400,
Height: 250,
Items :[{
X: 0, y: 5,
Xtype: 'label ',
Text: 'Send :'
},
{
X: 60, y: 0,
Name: 'to'
},{
X: 0, y: 35,
Xtype: 'label ',
Text: 'subject :'
},{
X: 60, y: 30,
Name: 'subobject'
},
{
X: 0, y: 60,
Xtype: 'textea ',
Name: 'msg'
}]
});

2. AccordionLayout
Accordion refers to the Accordion. As the name suggests, this layout can be like the Accordion. Some components are open and some are closed. This effect is useful as a sidebar.

Example usage:
Copy codeThe Code is as follows:
New Ext. Panel ({
Title: 'accordion Layout ',
Layout: 'accordion ',
RenderTo: document. body,
Defaults: {// applied to each contained panel
BodyStyle: 'padding: 15px'
},
LayoutConfig :{
// Layout-specific configs go here

TitleCollapse: true,
Animate: true,
ActiveOnTop: false
},
Items :[{
Title: 'panel 1 ',
Html: '<p> Panel content! </P>'
},{
Title: 'panel 2 ',
Html: '<p> Panel content! </P>'
},{
Title: 'panel 3 ',
Html: '<p> Panel content! </P>'
}]
});
});

3. AnchorLayout
This Layout is very useful, especially when Layout pages containing the GridView control, AnchorLayout is actually similar to the default Layout of the form of Winform, however, it can only fix the distance (absolute pixel or relative ratio) between a widget and the page border (right border and bottom border ). Through the anchor attribute setting, the anchor attribute setting API documentation explains clearly and directly excerpted it:

Anchor: String

This configuation option is to be applied to child items of a container managed by this layout (ie. configured withlayout: 'anchor ').

This value is what tells the layout how an item shoshould be anchored to the container. items added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string containing two values: the horizontal anchor value and the vertical anchor value (for example, '1970 100% '). the following types of anchor values are supported:

Percentage: Any value between 1 and 100, expressed as a percentage.
The first anchor is the percentage width that the item shocould take up within the container, and the second is the percentage height. For example:

// Two values specified
Anchor: '2014 100% '// render item complete width of the container and
// 1/2 height of the container
// One value specified
Anchor: '200' // the width value; the height will default to autoOffsets: Any positive or negative integer value.
This is a raw adjustment where the first anchor is the offset from the right edge of the container, and the second is the offset from the bottom edge. For example:

// Two values specified
Anchor: '-50-100' // render item the complete width of the container
// Minus 50 pixels and
// The complete height minus 100 pixels.
// One value specified
Anchor: '-50' // anchor value is assumed to be the right offset value
// Bottom offset will default to 0 Sides: Valid values are 'right' (or 'R') and 'bottom '(or' B ').
Either the container must have a fixed size or an anchorSize config value defined at render time in order for these to have any effect.

Mixed:
Anchor values can also be mixed as needed. For example, to render the width offset from the container right edge by 50 pixels and 75% of the container's height use:

Anchor: '-50 75%'. However, it does not seem helpful for me to set the first attribute of anchor, namely, Offset, to a positive number, although Offsets: Any positive or negative integer value, is described in this document.

Example usage:
Copy codeThe Code is as follows:
New Ext. Panel ({
Layout: 'anchor ',
Title: 'anchor ',
RenderTo: document. body,
Items :[{
Title: 'item 1 ',
Html: 'content 1 ',
Width: 800,
Anchor: 'right 20%'
},{
Title: 'item 2 ',
Html: 'content 2 ',
Width: 300,
Anchor: '2017 50%'
},{
Title: 'item 3 ',
Html: 'content 3 ',
Width: 600,
Anchor: '-100 50%'
}]
});

4. BorderLayout
BorderLayout is laid out by specifying the area on the page. At least one center area is required, and the west, south, east, and north areas can be set as auxiliary pages. It is usually suitable for the layout of large pages. The middle part is the main functional area, both sides, and the bottom can be used as a toolbar.
Copy codeThe Code is as follows:
Var myBorderPanel = new Ext. Panel ({
RenderTo: document. body,
Width: 700,
Height: 500,
Title: 'border Layout ',
Layout: 'border ',
Items :[{
Title: 'South Region is resizable ',
Region: 'south', // position for region
Height: 100,
Split: true, // enable resizing
MinSize: 75, // defaults to 50
MaxSize: 150,
Margins: '0 5 5 5'
},{
// Xtype: 'panel 'implied by default
Title: 'West Region is collapsible ',
Region: 'west ',
Margins: '5 0 5 ',
Width: 200,
Collapsible: true, // make collapsible
Cmargins: '5 5 0 5', // adjust top margin when collapsed
Id: 'West-region-container ',
Layout: 'fit ',
Unstyled: true
},{
Title: 'center Region ',
Region: 'center', // center region is required, no width/height specified
Xtype: 'Container ',
Layout: 'fit ',
Margins: '5 5 0 0'
}]
});

5. ColumnLayout
ColumnLayout can specify the width of the Panel. The width is used to specify the pixel, and the columnWidth is used to specify the percentage, which must be a number between 0 and 1. You can also use both of them. In both cases, the percentage is the percentage of the width of the entire page minus the remaining width of the fixed width column.

Example usage:
Copy codeThe Code is as follows:
Var p = new Ext. Panel ({
Title: 'column Layout-mixed ',
Layout: 'column ',
RenderTo: document. body,
Items :[{
Title: 'column 1 ',
ColumnWidth:. 3,
Html: '<div> Hello World </div>'
},{
Title: 'column 2 ',
Html: '<div> Hello </div> ',
ColumnWidth:. 6
},{
Title: 'column 3 ',
ColumnWidth:. 1,
Html: '<div> Hello </div> <div> Another Line </div>'
}]
});

This is the same as the API documentation and official examples, but the width of these columns cannot change with the size of the browser. You must refresh each time to adapt to the new browser width. However, the official website can indeed change the size of the internal panel as the browser is dragged. Very strange. If you know something, please give me some advice.

The layout usage is almost the same, so I will not write it down again. The key is flexible selection in practical applications.