Extjs Layout Browser .

Extjs3.1.0 版本支持17种，下面挑一些重要的简要的说明一下，要看效果，去上面给的链接，不再贴图了。给Panel设置Layout的方法是一样的，就是设置Panel的Layout配置项。
1. AbsoluteLayout
可以通过Panel内部组件的决定位置来布局。通过x,y来指定。

示例用法：
复制代码 代码如下:

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的意思是手风琴，顾名思义，这种布局可以向手风琴那样，有的组件张开，有的闭合。这种效果作为侧边栏比较有用。

示例用法：
复制代码 代码如下:

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
这种Layout非常有用，尤其是在布局含有GridView这一类控件的页面的时候，AnchorLayout实际上类似于Winform的form默认的布局方式，不过它仅仅可以固定某一个组件距离页面边框（右边框和底边框）的距离（绝对的像素或者相对比例）。 通过anchor属性设置，anchor属性的设置API文档上解释的十分清楚，就直接摘抄过来了：

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%'不过我将anchor的第一个属性也就是Offset设置成正数似乎没什么效果，虽然文档中说Offsets : Any positive or negative integer value.

示例用法：
复制代码 代码如下:

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%'