本篇講解Ext另一個重要的概念：布局。一般的容器類控件都是通過配置項items添加子控件的，這些子控件相對於父控件怎么定位呢，這里就要用到布局。某些容器類控件，它本身默認就集成了一種布局方式，例如比較典型的是：Ext.container.Viewport 布局控件，它其實就是一個border布局的容器，還有Ext.form.Panel、Ext.tab.Panel等。本節我們系統的分析各種布局方式。
一、absolute
這種方式的布局可以對子元素相對於父級容器控件進行絕對定位，它包含了x、y兩個配置項用於定位。
我們來看看一個例子：
[Js] //absolute
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div1',
width: 400,
height: 300,
layout: 'absolute',
items: [{
title: '面板1',
xtype: "panel",
html: "子元素1",
width: 200,
height: 100,
x: 50,
y: 50
}, {
title: '面板2',
xtype: "panel",
html: "子元素2",
width: 200,
height: 100,
x: 100,
y: 80
}]
});
效果如下：
二、accordion
有的js插件里面accordion都是一個ui控件，但是Ext是通過布局的方式實現的，我們可以用面板控件作為它的折疊項，並且還可以用js來翻動活動項。
[Js] //accordion
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div2',
width: 400,
height: 300,
layout: 'accordion',
items: [{
tools: [{ type: 'gear', handler: function () {
Ext.Msg.alert('提示', '配置按鈕被點擊。');
}
}, { type: 'refresh'}],
title: '面板1',
xtype: "panel",
html: "子元素1"
}, {
title: '面板2',
xtype: "panel",
html: "子元素2"
}, {
id: 'panel3',
title: '面板3',
xtype: "panel",
html: "子元素3"
}]
});
Ext.create("Ext.Button", {
renderTo: 'div2',
text: "打開第三頁",
handler: function () {
Ext.getCmp('panel3').expand(true);
}
});
效果如下：
三、anchor
這個布局就是表單面板默認支持的，每一項占據一行，支持用anchor配置項分配各個子項的高度和寬度。為百分比時表示當前大小占父容器的百分比，為數字的時一般為負數，表示父容器的值減去差值，剩下的為子項的大小。
[Js] //anchor
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div3',
width: 400,
height: 300,
layout: 'anchor',
items: [{
tools: [{ type: 'gear', handler: function () {
Ext.Msg.alert('提示', '配置按鈕被點擊。');
}
}, { type: 'refresh'}],
title: '面板1',
xtype: "panel",
html: "子元素1",
anchor: '80% 20%'
}, {
title: '面板2',
xtype: "panel",
html: "子元素2",
anchor: '-50 -200'
}, {
title: '面板3',
xtype: "panel",
html: "子元素3",
anchor: '100% 30%'
}]
});
效果如下：
四、border
這個布局可以定義東南西北四個方向的子元素，還有一個居中的子元素，一般用它來做頁面整頁布局，所以Ext.container.Viewport默認就支持了這個布局方式。
[Js] //border
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div4',
width: 400,
height: 300,
layout: 'border',
defaults: {
split: true, //是否有分割線
collapsible: true, //是否可以折疊
bodyStyle: 'padding:15px'
},
items: [{
region: 'north', //子元素的方位：north、west、east、center、south
title: '北',
xtype: "panel",
html: "子元素1",
height: 70
}, {
region: 'west',
title: '西',
xtype: "panel",
html: "子元素2",
width: 100
}, {
region: 'east',
title: '東',
xtype: "panel",
html: "子元素2",
width: 100
}, {
region: 'center',
title: '主體',
xtype: "panel",
html: "子元素3"
}, {
region: 'south',
title: '南',
xtype: "panel",
html: "子元素4",
height: 70
}]
});
效果如下：
五、card
這個布局可以像卡片一樣的切換每個子元素，各個子元素都會獨占父元素的容器空間。我們可以定義翻頁按鈕來控制當前處於活動狀態的子元素。
[Js] //card
var cardNav = function (incr) {
var l = Ext.getCmp('cardPanel').getLayout();
var i = l.activeItem.id.split('card')[1];
var next = parseInt(i, 10) + incr;
l.setActiveItem(next);
Ext.getCmp('cardPrev').setDisabled(next === 0);
Ext.getCmp('cardNext').setDisabled(next === 2);
};
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div5',
width: 400,
height: 300,
layout: 'card',
activeItem: 1, //默認活動項
id: 'cardPanel',
items: [{
id: 'card0',
title: '面板1',
xtype: "panel",
html: "子元素1"
}, {
id: 'card1',
title: '面板2',
xtype: "panel",
html: "子元素2"
}, {
id: 'card2',
title: '面板3',
xtype: "panel",
html: "子元素3"
}],
bbar: ['->', {
id: 'cardPrev',
text: '« 前一頁',
handler: Ext.Function.bind(cardNav, this, [-1])
}, {
id: 'cardNext',
text: '后一頁 »',
handler: Ext.Function.bind(cardNav, this, [1])
}]
});
效果如下：
六、column
這個布局把子元素按照列進行划分。
[Js] //column
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div6',
width: 400,
height: 300,
layout: 'column',
defaults: { //設置沒一列的子元素的默認配置
layout: 'anchor',
defaults: {
anchor: '100%'
}
},
items: [{
columnWidth: 4 / 10, //設置列的寬度
items: [{
title: '面板1',
border: false,
html: '子元素1'
}, {
title: '面板2',
border: false,
html: '子元素2'
}]
}, {
width: 120,
items: [{
title: '面板3',
border: false,
html: '子元素3'
}]
}, {
columnWidth: .40,
items: [{
title: '面板4',
border: false,
html: '子元素4'
}]
}]
});
效果如下：
七、fit
這個布局下子元素會獨占全部的容器空間，一般用於只有一個子項的情況。
[Js] //fit
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div7',
width: 400,
height: 300,
layout: 'fit',
items: [{
title: '面板',
html: '子元素',
border: false
}]
});
效果如下：
八、table
這個布局用表格定位的方式去組織子元素，我們可以像表格一樣設置rowspan和colspan。
[Js] //table
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div8',
width: 400,
height: 300,
layout: {
type: 'table',
columns: 4
},
defaults: { frame: true, width: 70, height: 50 },
items: [
{ html: '元素1', rowspan: 3, height: 150 },
{ html: '元素2', rowspan: 2, height: 100 },
{ html: '元素3' },
{ html: '元素4' },
{ html: '元素5', colspan: 2, width: 140 },
{ html: '元素6' },
{ html: '元素7' },
{ html: '元素8' }
]
});
效果如下：
九、vbox
這個布局把所有的子元素按照縱向排成一列。
[Js] //vbox
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div9',
width: 400,
height: 300,
layout: {
type: 'vbox',
pack: 'start', //縱向對齊方式 start：從頂部；center：從中部；end：從底部
align: 'stretchmax' //對齊方式 center、left、right：居中、左對齊、右對齊；stretch：延伸；stretchmax：以最大的元素為標准延伸
},
defaults: {
xtype: 'button'
},
items: [{
text: '小按鈕',
flex: 1 //表示當前子元素尺寸所占的均分的份數。
}, {
xtype: 'tbspacer', //插入的空填充
flex: 3
},
{
text: '中按鈕',
scale: 'medium'
}, {
text: '大按鈕',
width: 120,
scale: 'large',
flex: 1
}]
});
效果如下：
十、hbox
跟vbox類似，只不過變成了橫向的。
[Js] //hbox
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div10',
width: 400,
height: 300,
layout: {
type: 'hbox',
pack: 'end',
align: 'middle' //對齊方式 top、middle、bottom：頂對齊、居中、底對齊；stretch：延伸；stretchmax：以最大的元素為標准延伸
},
defaults: {
xtype: 'button'
},
items: [{
text: '小按鈕'
},{
text: '中按鈕',
scale: 'medium'
}, {
text: '大按鈕',
width: 120,
scale: 'large'
}]
});
效果如下：
作者：李盼（Lipan）
出處： [Lipan] （ http://www.cnblogs.com/lipan/）
版權聲明：本文的版權歸作者與博客園共有。轉載時須注明本文的詳細鏈接，否則作者將保留追究其法律責任。
出處： [Lipan] （ http://www.cnblogs.com/lipan/）
版權聲明：本文的版權歸作者與博客園共有。轉載時須注明本文的詳細鏈接，否則作者將保留追究其法律責任。