Extjs的容器組件都可以設置它的顯示風格，它的有效值有：
absolute, accordion, anchor, border, card, column, fit, form and table. 一共9種。
簡單總結一下，幫助記憶。
-
absolute 顧名思義，在容器內部，根據指定的座標定位顯示
-
accordion 這個是最容易記的，手風琴效果
Ext.OnReady(function(){
var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form佈局
{
renderTo:'paneldiv',
title:'容器組件',
layout:'accordion',
width:500,
height:200,
layoutConfig:{animate:false},
items:[
{title:'元素1',html:''},
{title:'元素2',html:''},
{title:'元素3',html:''},
{title:'元素4',html:''}
]
}
);
});
- anchor 這個效果具體還不知道有什麼用，就是知道注意一下
1.容器內的組件要麼指定寬度，要麼在anchor中同時指定高/寬，
2.anchor值通常只能爲負值(指非百分比值)，正值沒有意義，
3.anchor必須爲字符串值
Ext.onReady(function() {
var panel1 = new Ext.Panel({
title: "panel1",
height: 100,
anchor: '-50',
html: "高度等於100，寬度=容器寬度-50"
});
var panel2 = new Ext.Panel({
title: "panel2",
height: 100,
anchor: '50%',
html: "高度等於100,寬度=容器寬度的50%"
});
var panel3 = new Ext.Panel({
title: "panel3",
anchor: '-10, -250',
html: "寬度=容器寬度-10,高度=容器寬度-250"
});
var win = new Ext.Window({
title: "Anchor Layout",
height: 400,
width: 400,
plain: true,
layout: 'anchor',
items: [panel1, panel2,panel3]
});
win.show();
});
- border 將容器分爲五個區域:east,south,west,north,center
Ext.onReady(function() {
var button = Ext.get('show-btn');
var win;
button.on('click', function() {
//創建TabPanel
var tabs = new Ext.TabPanel({
region: 'center', //border佈局，將頁面分成東，南，西，北，中五部分，這裏表示TabPanel放在中間
margins: '3 3 3 0',
activeTab: 0,
defaults: {
autoScroll: true
},
items: [{
title: 'Bogus Tab',
html: "第一個Tab的內容."
}, {
title: 'Another Tab',
html: "我是另一個Tab"
}, {
title: 'Closable Tab',
html: "這是一個可以關閉的Tab",
closable: true
}]
});
//定義一個Panel
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west', //放在西邊，即左側
split: true,
width: 200,
collapsible: true, //允許伸縮
margins: '3 0 3 3',
cmargins: '3 3 3 3'
});
//如果窗口第一次被打開時才創建
if (!win) {
win = new Ext.Window({
title: 'Layout Window',
closable: true,
width: 600,
height: 350,
border : false,
plain: true,
layout: 'border',
closeAction:'hide',
items: [nav, tabs]//把上面創建的panel和TabPanel放在window中，並採用border方式佈局
});
}
win.show(button);
});
});
- card 像安裝嚮導一樣，一張一張顯示
Ext.onReady(function() {
var i = 0;
var navHandler = function(direction) {
if (direction == -1) {
i--;
if (i < 0) { i = 0; }
}
if (direction == 1) {
i++;
if (i > 2) { i = 2; return false; }
}
var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
if (i == 0) {
btnBack.disabled = true;
}
else {
btnBack.disabled = false;
}
if (i == 2) {
btnNext.value = "完成";
btnNext.disabled = true;
}
else {
btnNext.value = "下一步";
btnNext.disabled = false;
}
card.getLayout().setActiveItem(i);
};
var card = new Ext.Panel({
width: 200,
height: 200,
title: '註冊嚮導',
layout: 'card',
activeItem: 0, // make sure the active item is set on the container config!
bodyStyle: 'padding:15px',
defaults: {
border: false
},
bbar: [
{
id: 'move-prev',
text: '上一步',
handler: navHandler.createDelegate(this, [-1])
},
'->',
{
id: 'move-next',
text: '下一步',
handler: navHandler.createDelegate(this, [1])
}
],
items: [{
id: 'card-0',
html: '<h1>歡迎來到註冊嚮導!</h1><p>Step 1 of 3</p>'
}, {
id: 'card-1',
html: '<h1>請填寫註冊資料!</h1><p>Step 2 of 3</p>'
}, {
id: 'card-2',
html: '<h1>註冊成功!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: "container"
});
});
- column 把整個容器看成一列,然後向容器放入子元素時
Ext.onReady(function() {
var win = new Ext.Window({
title: "Column Layout",
height: 300,
width: 400,
plain: true,
layout: 'column',
items: [{
title:"width=50%",
columnWidth:0.5,
html:"width=(容器寬度-容器內其它組件固定寬度)*50%",
height:200
},
{
title:"width=250px",
width: 200,
height:100,
html:"固定寬度爲250px"
}
]
});
win.show();
});
- fit 一個子元素將充滿整個容器（如果多個子元素則只有一個元素充滿整個容器）
Ext.OnReady(function(){
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'容器組件',
layout:'fit',
width:500,
height:100,
items:[
{title:'子元素1'},
{title:'子元素2'},
{title:'子元素3'},
{title:'子元素4'},
{title:'子元素5'}
]
}
);
});
- form 是一種專門用於管理表單中輸入字段的佈局
Ext.onReady(function() {
var win = new Ext.Window({
title: "form Layout",
height: 150,
width: 230,
plain: true,
bodyStyle: 'padding:15px',
items:
{
xtype: "form",
labelWidth: 30,
defaultType: "textfield",
frame:true,
items:
[
{
fieldLabel:"姓名",
name:"username",
allowBlank:false
},
{
fieldLabel:"呢稱",
name:"nickname"
},
{
fieldLabel: "生日",
xtype:'datefield',
name: "birthday",
width:127
}
]
}
});
win.show();
});