**
按照extjs的4.1的文件來看，extjs的布局方式大致有12種，下面一一介紹，有些**就是文件中的。
1.border 邊界布局
border布局，最多可以將頁面分割為「東南西北中」五部分，是最常用的一種布局方式。我們可以根據專案的實際需求保留其中的部分區域，而將其他部分隱藏掉。12
1.1效果圖預覽
這裡寫描述
1.2 **demo
ext.onready(function () ,
items: [
//collapsible:是否可折疊,,
,,,]
});});12
3456
78910
1112
1314
1516
1718
1920
2122
1.3 關注點
a.north和south區域需要指定高度height,west和east區域需要指定寬度width。
b.儘管當不包含center元件時，頁面並不會由於語法錯誤而無法顯示，但頁面中會有一部分區域空出來。所以在使用border布局時，必須要定義其center區域。
c.center域不必賦予其寬度和高度，即使你定義了其寬高也不會有任何效果；當其他區域未定義比如south，center域會自動填充空出來的部分，如下圖：
這裡寫描述
2.accordion 手風琴布局【可折疊布局】
可折疊的accordion通常被用來作為導航欄或一級選單來使用，手風琴的每個title定義為一級選單，在其面板上定義選單樹，就是乙個完整的導航了。
2.1 預覽
這裡寫描述
2.2**demo
ext.onready(function () ,
width: 250,
minwidth: 90,
region: "west", //設定方位 位於border布局的west
split: true,
collapsible: true,
items: [,,
,]});//整體布局採用border
new ext.viewport(,
items: [
accordion, //這裡是（accordion）手風琴布局,,
,]});});12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
2930
3132
3334
3536
372.3 關注點
a.只有 ext的各種panel和ext.panel.panel的子類可以用於這種布局的容器中.
3.anchor 錨點布局
錨點布局將子元素與父容器繫結到了一塊，當父容器大小發生改變時，所有固定的子項將按各自的anchor 規則自動被重新渲染固定.
3.1 預覽圖
這裡寫描述
3.2 **demo
});123
4567
891011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
3233
3435
3637
3839
403.3 關注點
a.上述**中anchor屬性有三種寫法
一、anchor: 『75% 20%』 子元素寬度為容器的75%,高度為20%
二、 anchor: 『-300 -200』 子元素距離容器右邊距300，底部200
三、anchor: 『-250 20%』 混合模式 子元素距離右邊250，高度為20%
b.xtype用來定義子元素的型別
4.absolute 絕對布局
absolute布局繼承自anchor,但是absolute是使用標準的x,y來定義子元素的座標，所以當父容器大小改變時，子元素不會隨之變化。12
4.1 預覽圖
這裡寫描述
4.2**demo
}});
});123
4567
891011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
3233
3435
3637
3839
4041
4243
4445
4647
4849
5051
524.3 關注點
a.上面**的預覽中，如果改變父容器的大小，子元素不會隨著變化，但有時我們既想使用座標來定位，又希望子元素隨容器變化，這時可以使用anchor屬性，你可以去掉**中的相關注釋試試看。由於absolute是繼承自anchor的，所有可以使用該屬性。
5.card 卡片布局
card管理多個子元件, 每個都完全填滿父容器, 而每次僅顯示乙個. 此布局樣式多用於嚮導, 實現標籤頁布局等等
5.1 效果圖預覽
這裡寫描述
這裡寫描述
5.2 **demo
ext.onready(function());12
3456
78910
1112
1314
1516
1718
1920
2122
2324
256.3關注點
a.如果你想要使用fit實現布局，就應該只給其乙個子元素
7.form 表單布局
這個布局會將表單中所有的輸入框縱向的依次的排列, 且寬度與容器寬度相等.12
7.1預覽
這裡寫描述
7.2 **demo
ext.onready(function(),,, , , , ]
});}
});123
4567
891011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
3233
3435
3637
3839
4041
4243
4445
4647
4849
5051
5253
5455
7.3關注點
a.表單項的寬度與容器一致，所以在form布局下各子控制項的padding屬性配置將被忽略
8.column 列布局
這個布局用於在乙個多列格式中建立結構化布局的布局樣式, 每列可以用百分比或固定的寬度值來定義,
8.1預覽
這裡寫描述
8.2**demo
ext.onready(function());12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
8.3 注意
a.每列的寬度可以通過百分比定義 所有的和為1
9.table**布局
通過指定rowspan和colspan來實現複雜布局
9.1預覽圖
這裡寫描述
9.2**demo
ext.onready(function());12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
2930
3132
3334
3536
9.3 關注點
a.我們指定每部分佔據幾行幾列，該布局會自動按順序分配
10.hbox
水平box，所有元件水平依次排列
10.1預覽
這裡寫描述
10.2 **demo
ext.onready(function(),
]});
}});
Ext JS 布局方式 Layouts
前言 也就是容器裡，子控制項的位置。向容器裡面新增ui元件的時候，需要定義其布局屬性。layouts會告訴容器如何去安排子元件的位置。使用布局的前提是，元件本身必須是ext.container.container或其子類 只有這些控制項才有布局屬性 所有布局類都繼承自ext.layout.conta...
Android五種布局方式
android五種布局方式 linearlayout relativelayout tablelayout.android使用xml宣告介面布局 將程式的表現層和控制層分離 修改使用者介面時，無需更改程式的源 視覺化工具設計使用者介面 android五種布局方式 linearlayout線性布局 a...
HTML CSS 五種布局方式
已知布局元素的高度，寫出三欄布局，要求左欄 右欄寬度各為300px，中間自適應。一 浮動布局 charset utf 8 浮動布局title type text css wrap1 div wrap1 left wrap1 right wrap1 center style head class wr...