Extjs4 佈局 layout 詳解
1.Layouts
1)Ext.layout.container.Border
layout : 'border' 表示咱們使用了Border佈局，這種佈局方式稱爲邊界佈局，它將頁面分隔成爲:west,east,south,north,center這五個部分，咱們在items裏面使用region參數爲它組織定義具體的位置。
north和south部分只能設置高度（height），west和east部分只能設置寬度（width）。north south west east區域變大了，center區域就變小了。
參數 split:true 能夠拖動除了center四個區域的大小。
參數 collapsible:true 激活摺疊功能，前面title必須設置，由於摺疊按鈕是出現標題部分
注意：center 區域是必須使用的，並且center 區域不容許摺疊。
Ext.create('Ext.panel.Panel', {
width: 500,
height: 400,
layout:
'border',
items: [{
title:
'South Region is resizable'
,
region:
'south'
,
// position for region
xtype:
'panel'
,
height: 100,
split:
true
,
// enable resizing
margins:
'0 5 5 5'
},{
// xtype: 'panel' implied by default
title:
'West Region is collapsible'
,
region:
'west'
,
xtype:
'panel'
,
margins:
'5 0 0 5'
,
width: 200,
collapsible:
true
,
// make collapsible
id:
'west-region-container'
,
layout:
'fit'
},{
title:
'Center Region'
,
region:
'east'
,
// center region is required, no width/height specified
xtype:
'panel'
,
layout:
'fit'
,
margins:
'5 5 0 0'
}],
renderTo: Ext.getBody()
});
2)Ext.layout.container.Fit
layout:'fit' 表示咱們引用了fit佈局。當客戶要求一個窗口裏顯示一個Grid表格，可讓它自動適應窗體的大小的變化，窗體變大時候Grid表格也變大，窗體變小的時候也變小。
注意：layout : 'fit' 組件的items只能放一個組件，若是放了多個組件，那麼也只有一個子組件會起做用。
Ext.define(
'ParentWindow'
,{
extend :
'Ext.window.Window'
,
title :
'ParentWindow'
,
width :
'300px'
,
height :
'200px'
,
layout :
'fit',
items : {
xtype :
'gridpanel'
,
store: store,
stateful:
true
,
layout :
'fit'
,
columns: [
{
text :
'Company'
,
flex : 1,
sortable :
false
,
dataIndex:
'company'
},
{
text :
'Price'
,
width : 75,
sortable :
true
,
renderer :
'usMoney'
,
dataIndex:
'price'
},
{
text :
'Change'
,
width : 75,
sortable :
true
,
dataIndex:
'change'
},
{
text :
'% Change'
,
width : 75,
sortable :
true
,
dataIndex:
'pctChange'
},
{
text :
'Last Updated'
,
width : 85,
sortable :
true
,
renderer : Ext.util.Format.dateRenderer(
'm/d/Y'
),
dataIndex:
'lastChange'
}]
}
});
3）Ext.layout.container.Accordion
layout : '
accordion' 表明使用了accordion佈局方式。
var
accrodion = Ext.create(
'Ext.panel.Panel'
, {
layout:
'accordion',
defaults: {
bodyStyle:
'padding:15px'
},
layoutConfig: {
titleCollapse:
true
,
animate:
true
,
activeOnTop:
false
},
items: [{
title:
'Panel 1'
,
html:
'Panel content!'
},{
title:
'Panel 2'
,
html:
'Panel content!'
},{
title:
'Panel 3'
,
html:
'Panel content!'
}],
});
4)Ext.layout.container.Card
layout : 'card' Card佈局能夠看作是一疊卡片，從上面看起來就像是一張卡片，咱們能夠把中間的卡片抽出來，放到最上面，但是每次只能顯示一張卡片。
<script type="text/javascript">
var
navigate =
function
(panel,direction){
var
layout = panel.getLayout();
layout[direction]();
Ext.getCmp(
'move-prev'
).setDisabled(!layout.getPrev());
Ext.getCmp(
'move-next'
).setDisabled(!layout.getNext());
}
var
cardPanel = Ext.create(
'Ext.panel.Panel'
,{
layout:
'card',
activeItem: 0,
// make sure the active item is set on the container config!
bodyStyle:
'padding:15px'
,
defaults: {
// applied to each contained panel
border:
false
},
bbar : [{
id:
'move-prev'
,
text :
'上一章'
,
xtype :
'button'
,
listeners : {
'click'
:
function
(btn){
navigate(btn.up(
'panel'
),
'prev'
);
}
}
},{
id:
'move-next'
,
text :
'下一章'
,
xtype :
'button'
,
listeners : {
'click'
:
function
(btn){
navigate(btn.up(
'panel'
),
'next'
);
}
}
}],
items : [
{
id :
'card0'
,
html :
'<h1>Welcome to card0!</h1>第一章：好好學習'
},{
id :
'card1'
,
html :
'<h1>Welcome to card1!</h1>第二章：每天向上'
},{
id :
'card2'
,
html :
'<h1>Welcome to card2!</h1>第三章：good good study'
},{
id :
'card3'
,
html :
'<h1>Welcome to card3!</h1>第四章：每天'
},{
id :
'card4'
,
html :
'<h1>Welcome to card4!</h1>第五章：頂頂頂'
}
]
});
Ext.onReady(
function
(){
Ext.create(
'Ext.window.Window'
,{
title :
'CardLayoutWindow'
,
width :
'300px'
,
height :
'200px'
,
layout :
'fit'
,
items : cardPanel
}).show();
});
</
script
>
5）Ext.layout.container.Anchor
layout:'anchor'設置爲anchor佈局模式。在每個panel中的items中有一個參數anchor，參數是一個字符串。
anchor: '75% 20%'，中間用一個空格隔開，空格先後是%的數字。第一個參數75%：意思是寬度設置爲總體的75%；第二個參數20%：是設置高度爲總體的20%。
anchor:'-300 -200' ，中間用一個空格隔開，空格先後是整數，第一個參數-300：表示距離右側的相對距離；第二個參數-200：表示距離底部的相對距離。
<
script
type
=
"text/javascript"
>
Ext.onReady(
function
(){
Ext.create(
'Ext.Panel'
, {
width: 500,
height: 400,
title:
"AnchorLayout Panel"
,
layout:
'anchor',
renderTo: Ext.getBody(),
items: [{
xtype:
'panel'
,
title:
'75%寬度 20%高度'
,
anchor:
'75% 20%'
},{
xtype:
'panel'
,
title:
'Offset -300 Width & -200 Height'
,
anchor:
'-300 -200'
},{
xtype:
'panel'
,
title:
'Mixed Offset and Percent'
,
anchor:
'-250 20%'
}]
});
});
</
script
>
6)Ext.layout.container.Absolute
layout:'absolute'。咱們能夠對每個控件的位置進行控制。
x:設置x座標；y:設置y座標
var
alayout = Ext.create(
'Ext.form.Panel'
, {
width: 300,
height: 275,
layout:
'absolute',
defaultType:
'textfield'
,
items: [{
x: 10,
y: 10,
xtype:
'label'
,
text:
'Send To:'
},{
x: 80,
y: 10,
name:
'to'
,
anchor:
'90%'
// anchor width by percentage
},{
x: 10,
y: 40,
xtype:
'label'
,
text:
'Subject:'
},{
x: 80,
y: 40,
name:
'subject'
,
anchor:
'90%'
// anchor width by percentage
},{
x:0,
y: 80,
xtype:
'textareafield'
,
name:
'msg'
,
anchor:
'100% 100%'
// anchor width and height
}]
});
7)Ext.layout.container.Column
layout:'column
'：表格佈局。
注意items 中
columnWidth 的數值必須是0~1之間的小數，它表示每一個子組件在總體中所佔的百分比。它們的總和應該是1，不然會出現沒有填滿的狀況。
var
columnLayout = Ext.create(
'Ext.panel.Panel'
, {
width: 350,
height: 250,
layout:
'column',
items: [{
title:
'表格Layout 1'
,
columnWidth: .25
},{
title:
'表格Layout 2'
,
columnWidth: .55
},{
title:
'表格Layout 3'
,
columnWidth: .20
}],
renderTo: Ext.getBody()
});
8)Ext.layout.container.Table
layout : 'table' 表格佈局。table佈局把頁面定義成一個表格包括行和列。它在生成代碼的時候就是生成了html代碼中的<table></table>標籤。
var
tableLayout = Ext.create(
'Ext.panel.Panel'
,{
width: 300,
height: 150,
layout : {
type : 'table',
columns : 3
},
defaults: {
// applied to each contained panel
bodyStyle:
'padding:20px'
},
items: [{
html:
'A table'
,
rowspan: 2
},{
html:
'B table'
,
colspan: 2
},{
html:
'C table'
,
cellCls:
'highlight'
},{
html:
'D table'
}]
});
9)Ext.layout.container.VBox 垂直佈局
a)align：字符類型，指示組件在容器內的對齊方式。有以下幾種屬性。javascript
一、left（默認）：排列於容器左側。html
二、center ：控件在容器水平居中。java
三、stretch：控件橫向拉伸至容器大小app
四、stretchmax:控件橫向拉伸，寬度爲最寬控件的寬。佈局
b)pack : 字符類型，指示組件在容器的位置，有以下幾種屬性。學習
一、start（默認）：組件在容器上邊flex
二、center：組件在容器中間ui
三、end：組件在容器的下邊spa
10)Ext.layout.container.HBox 水平佈局
a)align：字符類型，指示組件在容器內的對齊方式。有以下幾種屬性。orm
一、top（默認）：排列於容器頂端。
二、middle：垂直居中排列於容器中。
三、stretch：垂直排列且拉伸義填補容器高度
四、stretchmax:垂直拉伸，而且組件以最高高度的組件爲準。
b)pack : 字符類型，指示組件在容器的位置，有以下幾種屬性。
一、start（默認）：組件在容器左邊
二、center：組件在容器中間
三、end：組件在容器的右邊
2)Ext.layout.container.Fit
layout:'fit' 表示咱們引用了fit佈局。當客戶要求一個窗口裏顯示一個Grid表格，可讓它自動適應窗體的大小的變化，窗體變大時候Grid表格也變大，窗體變小的時候也變小。
注意：layout : 'fit' 組件的items只能放一個組件，若是放了多個組件，那麼也只有一個子組件會起做用。
Ext.define(
'ParentWindow'
,{
extend :
'Ext.window.Window'
,
title :
'ParentWindow'
,
width :
'300px'
,
height :
'200px'
,
layout :
'fit',
items : {
xtype :
'gridpanel'
,
store: store,
stateful:
true
,
layout :
'fit'
,
columns: [
{
text :
'Company'
,
flex : 1,
sortable :
false
,
dataIndex:
'company'
},
{
text :
'Price'
,
width : 75,
sortable :
true
,
renderer :
'usMoney'
,
dataIndex:
'price'
},
{
text :
'Change'
,
width : 75,
sortable :
true
,
dataIndex:
'change'
},
{
text :
'% Change'
,
width : 75,
sortable :
true
,
dataIndex:
'pctChange'
},
{
text :
'Last Updated'
,
width : 85,
sortable :
true
,
renderer : Ext.util.Format.dateRenderer(
'm/d/Y'
),
dataIndex:
'lastChange'
}]
}
});
3）Ext.layout.container.Accordion
layout : '
accordion' 表明使用了accordion佈局方式。
var
accrodion = Ext.create(
'Ext.panel.Panel'
, {
layout:
'accordion',
defaults: {
bodyStyle:
'padding:15px'
},
layoutConfig: {
titleCollapse:
true
,
animate:
true
,
activeOnTop:
false
},
items: [{
title:
'Panel 1'
,
html:
'Panel content!'
},{
title:
'Panel 2'
,
html:
'Panel content!'
},{
title:
'Panel 3'
,
html:
'Panel content!'
}],
});
4)Ext.layout.container.Card
layout : 'card' Card佈局能夠看作是一疊卡片，從上面看起來就像是一張卡片，咱們能夠把中間的卡片抽出來，放到最上面，但是每次只能顯示一張卡片。
<script type="text/javascript">
var
navigate =
function
(panel,direction){
var
layout = panel.getLayout();
layout[direction]();
Ext.getCmp(
'move-prev'
).setDisabled(!layout.getPrev());
Ext.getCmp(
'move-next'
).setDisabled(!layout.getNext());
}
var
cardPanel = Ext.create(
'Ext.panel.Panel'
,{
layout:
'card',
activeItem: 0,
// make sure the active item is set on the container config!
bodyStyle:
'padding:15px'
,
defaults: {
// applied to each contained panel
border:
false
},
bbar : [{
id:
'move-prev'
,
text :
'上一章'
,
xtype :
'button'
,
listeners : {
'click'
:
function
(btn){
navigate(btn.up(
'panel'
),
'prev'
);
}
}
},{
id:
'move-next'
,
text :
'下一章'
,
xtype :
'button'
,
listeners : {
'click'
:
function
(btn){
navigate(btn.up(
'panel'
),
'next'
);
}
}
}],
items : [
{
id :
'card0'
,
html :
'<h1>Welcome to card0!</h1>第一章：好好學習'
},{
id :
'card1'
,
html :
'<h1>Welcome to card1!</h1>第二章：每天向上'
},{
id :
'card2'
,
html :
'<h1>Welcome to card2!</h1>第三章：good good study'
},{
id :
'card3'
,
html :
'<h1>Welcome to card3!</h1>第四章：每天'
},{
id :
'card4'
,
html :
'<h1>Welcome to card4!</h1>第五章：頂頂頂'
}
]
});
Ext.onReady(
function
(){
Ext.create(
'Ext.window.Window'
,{
title :
'CardLayoutWindow'
,
width :
'300px'
,
height :
'200px'
,
layout :
'fit'
,
items : cardPanel
}).show();
});
</
script
>
5）Ext.layout.container.Anchor
layout:'anchor'設置爲anchor佈局模式。在每個panel中的items中有一個參數anchor，參數是一個字符串。
anchor: '75% 20%'，中間用一個空格隔開，空格先後是%的數字。第一個參數75%：意思是寬度設置爲總體的75%；第二個參數20%：是設置高度爲總體的20%。
anchor:'-300 -200' ，中間用一個空格隔開，空格先後是整數，第一個參數-300：表示距離右側的相對距離；第二個參數-200：表示距離底部的相對距離。
<
script
type
=
"text/javascript"
>
Ext.onReady(
function
(){
Ext.create(
'Ext.Panel'
, {
width: 500,
height: 400,
title:
"AnchorLayout Panel"
,
layout:
'anchor',
renderTo: Ext.getBody(),
items: [{
xtype:
'panel'
,
title:
'75%寬度 20%高度'
,
anchor:
'75% 20%'
},{
xtype:
'panel'
,
title:
'Offset -300 Width & -200 Height'
,
anchor:
'-300 -200'
},{
xtype:
'panel'
,
title:
'Mixed Offset and Percent'
,
anchor:
'-250 20%'
}]
});
});
</
script
>
6)Ext.layout.container.Absolute
layout:'absolute'。咱們能夠對每個控件的位置進行控制。
x:設置x座標；y:設置y座標
var
alayout = Ext.create(
'Ext.form.Panel'
, {
width: 300,
height: 275,
layout:
'absolute',
defaultType:
'textfield'
,
items: [{
x: 10,
y: 10,
xtype:
'label'
,
text:
'Send To:'
},{
x: 80,
y: 10,
name:
'to'
,
anchor:
'90%'
// anchor width by percentage
},{
x: 10,
y: 40,
xtype:
'label'
,
text:
'Subject:'
},{
x: 80,
y: 40,
name:
'subject'
,
anchor:
'90%'
// anchor width by percentage
},{
x:0,
y: 80,
xtype:
'textareafield'
,
name:
'msg'
,
anchor:
'100% 100%'
// anchor width and height
}]
});
7)Ext.layout.container.Column
layout:'column
'：表格佈局。
注意items 中
columnWidth 的數值必須是0~1之間的小數，它表示每一個子組件在總體中所佔的百分比。它們的總和應該是1，不然會出現沒有填滿的狀況。
var
columnLayout = Ext.create(
'Ext.panel.Panel'
, {
width: 350,
height: 250,
layout:
'column',
items: [{
title:
'表格Layout 1'
,
columnWidth: .25
},{
title:
'表格Layout 2'
,
columnWidth: .55
},{
title:
'表格Layout 3'
,
columnWidth: .20
}],
renderTo: Ext.getBody()
});
8)Ext.layout.container.Table
layout : 'table' 表格佈局。table佈局把頁面定義成一個表格包括行和列。它在生成代碼的時候就是生成了html代碼中的<table></table>標籤。
var
tableLayout = Ext.create(
'Ext.panel.Panel'
,{
width: 300,
height: 150,
layout : {
type : 'table',
columns : 3
},
defaults: {
// applied to each contained panel
bodyStyle:
'padding:20px'
},
items: [{
html:
'A table'
,
rowspan: 2
},{
html:
'B table'
,
colspan: 2
},{
html:
'C table'
,
cellCls:
'highlight'
},{
html:
'D table'
}]
});
9)Ext.layout.container.VBox 垂直佈局
a)align：字符類型，指示組件在容器內的對齊方式。有以下幾種屬性。
一、left（默認）：排列於容器左側。
二、center ：控件在容器水平居中。
三、stretch：控件橫向拉伸至容器大小
四、stretchmax:控件橫向拉伸，寬度爲最寬控件的寬。
b)pack : 字符類型，指示組件在容器的位置，有以下幾種屬性。
一、start（默認）：組件在容器上邊
二、center：組件在容器中間
三、end：組件在容器的下邊
10)Ext.layout.container.HBox 水平佈局
a)align：字符類型，指示組件在容器內的對齊方式。有以下幾種屬性。
一、top（默認）：排列於容器頂端。
二、middle：垂直居中排列於容器中。
三、stretch：垂直排列且拉伸義填補容器高度
四、stretchmax:垂直拉伸，而且組件以最高高度的組件爲準。
b)pack : 字符類型，指示組件在容器的位置，有以下幾種屬性。
一、start（默認）：組件在容器左邊
二、center：組件在容器中間
三、end：組件在容器的右邊
相關文章
- 1. ExtJs4 layout 佈局
- 2. ExtJs4 筆記（14） layout 佈局
- 3. ExtJs4 筆記之 layout 佈局
- 4. ExtJs4.X之Viewport佈局
- 5. Android系統五大布局詳解Layout
- 6. ExtJS佈局方式（layout）圖文詳解
- 7. Flex 佈局（layout）
- 8. 佈局（線性佈局 Linear Layout ）相對佈局 (Relative Layout)
- 9. Layout( 佈局)
- 10. Layout（佈局）
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • Flink 數據傳輸及反壓詳解
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
