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

4. BorderLayout
BorderLayout通過指定頁面上的區域來布局，至少要有一個center區域，然后可以設置west,south,east,north區域，作為輔助的頁面。通常適合大型頁面的布局，中部為主要功能區，兩側，底部可以作為工具欄。
復制代碼 代碼如下:
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可以指定面板的寬度，用width指定的是像素，columnWidth指定百分比，必須是0-1之間的數字。也可以兩者都用，都用的情況下，百分比是整個頁面的寬度減去固定寬度的列剩余的寬度的百分比。

示例用法:
復制代碼 代碼如下:
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>'
}]
});

這個用法是和API文檔以及官方例子是一樣的，但是這些列的寬度確不能隨著瀏覽器大小的改變而改變，每次總要刷新一下才能重新適應新的瀏覽器寬度。但是官網的例子上確實可以隨著瀏覽器的拖動內部的面板大小也跟著變化的。很奇怪。如果有朋友知道，請指點迷津下。

布局的用法都差不多，就不再繼續寫下去了。關鍵是在實際應用中靈活選用。

JavaScript技術：Extjs學習筆記之七 布局，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。