快捷導(dǎo)航

Extjs學(xué)習(xí)筆記之七布局

更新時(shí)間：2010年01月08日 22:22:07 作者：

Panel內(nèi)部的組件添加多了之后，組件如何排放就成了一個(gè)問題，Extjs的Layout就是為了解決這個(gè)問題的。其實(shí)學(xué)習(xí)Layout的最好地點(diǎn)就是Extjs的官網(wǎng)的例子

Extjs Layout Browser .

Extjs3.1.0 版本支持17種，下面挑一些重要的簡(jiǎn)要的說明一下，要看效果，去上面給的鏈接，不再貼圖了。給Panel設(shè)置Layout的方法是一樣的，就是設(shè)置Panel的Layout配置項(xiàng)。
1. AbsoluteLayout
可以通過Panel內(nèi)部組件的決定位置來(lái)布局。通過x,y來(lái)指定。

示例用法：

復(fù)制代碼代碼如下:

 
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的意思是手風(fēng)琴，顧名思義，這種布局可以向手風(fēng)琴那樣，有的組件張開，有的閉合。這種效果作為側(cè)邊欄比較有用。

示例用法：

復(fù)制代碼代碼如下:

 
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這一類控件的頁(yè)面的時(shí)候，AnchorLayout實(shí)際上類似于Winform的form默認(rèn)的布局方式，不過它僅僅可以固定某一個(gè)組件距離頁(yè)面邊框（右邊框和底邊框）的距離（絕對(duì)的像素或者相對(duì)比例）。通過anchor屬性設(shè)置，anchor屬性的設(shè)置API文檔上解釋的十分清楚，就直接摘抄過來(lái)了：

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的第一個(gè)屬性也就是Offset設(shè)置成正數(shù)似乎沒什么效果，雖然文檔中說Offsets : Any positive or negative integer value.

示例用法：

復(fù)制代碼代碼如下:

 
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通過指定頁(yè)面上的區(qū)域來(lái)布局，至少要有一個(gè)center區(qū)域，然后可以設(shè)置west,south,east,north區(qū)域，作為輔助的頁(yè)面。通常適合大型頁(yè)面的布局，中部為主要功能區(qū)，兩側(cè)，底部可以作為工具欄。

復(fù)制代碼代碼如下:

 
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之間的數(shù)字。也可以兩者都用，都用的情況下，百分比是整個(gè)頁(yè)面的寬度減去固定寬度的列剩余的寬度的百分比。

示例用法:

復(fù)制代碼代碼如下:

 
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>' 
}] 
}); 

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

布局的用法都差不多，就不再繼續(xù)寫下去了。關(guān)鍵是在實(shí)際應(yīng)用中靈活選用。