Extjs Study Notes 7 Layout_extjs

Extjs Layout Browser .

Extjs3.1.0 version supports 17 types. Let’s select some important ones and briefly explain them. To see the effect, go to the link given above. I won’t post pictures anymore. The method of setting Layout for Panel is the same, which is to set the Layout configuration item of Panel.
1. AbsoluteLayout
can be laid out by determining the position of the internal components of the Panel. Specified by x,y.

Example usage:

Copy code The 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 To:'
},
{
x: 60, y: 0,
name: 'to'
}, {
x: 0, y: 35,
xtype: 'label' ,
text: 'Subject:'
}, {
x: 60, y: 30,
name: 'subject'
},
{
x: 0 , y: 60,
xtype: 'textarea',
name: 'msg'
}]
});

2.AccordionLayout
Accordion means accordion. As the name suggests, this layout can be like an accordion, with some components opened and some closed. This effect is more useful as a sidebar.

Example usage:

Copy code The 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: '

Panel content!

'
}, {
title : 'Panel 2',
html: '

Panel content!

'
}, {
title: 'Panel 3',
html: ''
}]
});
});

3. AnchorLayout
This kind of Layout is very useful, especially when laying out pages containing controls such as GridView. AnchorLayout is actually similar to the default layout method of Winform's form, but It can only fix the distance (absolute pixels or relative proportion) between a certain component and the page border (right border and bottom border). Through the anchor attribute setting, the anchor attribute setting API document explains it very clearly, so it is excerpted directly:

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 should 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, '100% 50%'). 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 should take up within the container, and the second is the percentage height. For example:

// two values ​​specified
anchor: '100% 50%' // render item complete width of the container and
// 1/2 height of the container
// one value specified
anchor: ' 100%' // 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 0Sides : 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 seems to have no effect when I set the anchor's first attribute, Offset, to a positive number, although the document says Offsets: Any positive or negative integer value.

Example usage:

Copy code The 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: '50% 30%'
}, {
title: 'Item 3',
html: 'Content 3',
width: 600,
anchor:'-100 50%'
}]
});

4. BorderLayout
BorderLayout lays out the area by specifying the area on the page , there must be at least one center area, and then you can set the west, south, east, and north areas as auxiliary pages. It is usually suitable for the layout of large pages. The middle is the main functional area, and the two sides and bottom can be used as toolbars.

Copy code The 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 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. Width specifies the pixels, and columnWidth specifies the percentage, which must be a number between 0-1. You can also use both. When both are used, the percentage is the width of the entire page minus the remaining width of the fixed-width column.

Example usage:

Copy code The 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:'

Hello World

'
}, {
title: 'Column 2',
html:'

Hello

',
columnWidth: .6
}, {
title: 'Column 3',
columnWidth: .1,
html:'< div>Hello

Another Line

'
}]
});

This usage is the same as the API documentation and official examples , but the width of these columns cannot change as the browser size changes. It must be refreshed every time to adapt to the new browser width. However, in the example on the official website, the size of the internal panel can indeed change as the browser is dragged. Very strange. If anyone knows, please enlighten me.

The usage of layout is similar, so I won’t write any more. The key is to choose flexibly in practical applications.