ExtJS3 Layout
1.column Layout 列布局
在子元素中指定使用columnWidth或width來指定子元素所占的列寬度。
columnWidth表示使用百分比的形式指定列寬度。
width則是使用絕對象素的方式指定列寬度，在實際應用中可以混合使用兩種方式。
Ext.onReady(function(){
var window = new Ext.Window({
layout: "column",
title: "Hello World",
id: "helloWorldWindow",
bodyStyle: "padding:10px;",
width: 550,
height: 300,
x: 100,
y: 100,
items: [
{
columnWidth: .6,
baseCls: "x-plain",
frame: true,
layout: "form",
bodyStyle: "padding:5px;",
items: [
{xtype: "textfield", fieldLabel: "UserName"},
{xtype: "textfield", fieldLabel: "Age"}
]
},
{
columnWidth: .3,
baseCls: "x-plain",
bodyStyle: "padding:5px;",
items: [
{xtype: "textarea"}
]
},
{
columnWidth: .1,
baseCls: "x-plain",
bodyStyle: "padding:5px;",
layout: "form",
items: [
{
xtype: "button",
text: "Ok",
handler: function() {
alert("OK");
}
},
{
xtype: "button",
text: "Cancel",
handler: function() {
alert("Cancel");
}
}
]
}
]
});
window.render(Ext.getDom("tt"));
window.show();
});
2.fit Layout
Fit布局，子元素將自動填滿整個父容器（對元素設置寬度無效），如果容器組件中有多個子元素，則只會顯示第一個子元素。
Ext.onReady(
function(){
var win = new Ext.Window({
title: "Hello World",
renderTo: Ext.getDom("tt"),
width: 400,
height: 250,
x: 150,
y: 50,
layout: "fit",
items: [
{xtype:"panel", title:"O"},
{xtype:"panel", title:"K"}
]
});
win.show();
}
);
3. border Layout
一、Border布局由類Ext.layout.BorderLayout定義，布局名稱為border。該布局把容器分成東南西北中五個區域，分別由east，south, west，north, cente來表示，在往容器中添加子元素的時候，我們只需要指定這些子元素所在的位置，Border布局會自動把子元素放到布局指定的位置。
Ext.onReady(
function() {
new Ext.Viewport({
layout:"border",
items:[
{
region:"north",
height:80,
xtype: "label",
//style: "border: 1px solid red;padding:1px;",
frame: true,
text: "cdred.net study club
"
},
{
region:"south",
height:20,
xtype:'label',
text:'Status show zone..'
},
{
region:"center",
title:"中央面板"
},
{
region:"west",
width:200,
title:"系統欄目",
collapsible: true
},
{
region:"east",
width:150,
collapsed: true,
collapsible: true,
title:"在線好友"
}
]
});
}
);
4.accordion Layout
Accordion布局由類Ext.layout.Accordion定義，表示可折疊的布局，點擊每一個子元素的頭部名稱或右邊的按鈕，則會展開該面板，并收縮其它已經展開的面板。
layoutConfig：true表示在執行展開折疊時啟動動畫效果，默認值為false。
** 注意如果你是用 panel之類的 必須擁有 title:'' 屬性
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"人員信息",
renderTo:Ext.getDom("tt"),
frame:true,
width:250,
height:300,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[
{xtype:"panel", title:"O", html:"這是子元素1中的內容"},
{xtype:"panel", title:"K", html:"這是子元素2中的內容"},
{xtype:"panel", title:"L", html:"這是子元素3中的內容"}
]
});
});
5 form Layout
Form布局由類Ext.layout.FormLayout定義，名稱為form，是一種專門用于管理表單中輸入字段的布局，這種布局主要用于在程序中創建表單字段或表單元素等使用。
hideLabels：tru表示隱藏標簽，默認為false。
labelAlign：標簽隊齊方式left、right、center,默認為left。
在實際應用中，Ext.form.FormPanel這個類默認布局使用的是Form布局，因此我們直接使用FormPanel即可。
Ext.onReady(
function() {
var panel = new Ext.Panel({
layout:"form",
title: "HelloWorld",
renderTo:Ext.getDom("tt"),
width: 400,
height:250,
frame: true,
hideLabel: true,
collapsible: true,
bodyStyle: "padding:20px;",
defaultType:"textfield",
items:[
{fieldLabel:"Hello"},
{fieldLabel:"World"}
]
});
}
);
6 table Layout
Table布局由類Ext.layout.TableLayout定義，類以于html中的table，可以對行或列進行合并。
layoutConfig使用columns指定父容器分成3列，
rowspan合并行數目。
colspan合并列數目。
Ext.onReady(exe);
function exe() {
var panel = new Ext.Panel({
title: "Hello World",
layout: "table",
width: 500,
height: 300,
bodyStyle:'padding:20px;',
layoutConfig: {
columns: 3
},
items: [
{xtype:"panel", title:"hello", html:"hello context", rowspan:2, height: 100},
{xtype:"panel", title:"world", html:"world context", colspan:2},
{xtype:"panel", title:"cheng", html:"cheng context"},
{xtype:"panel", title:"du", html:"du context"}
]
});
panel.render(Ext.getDom("tt"));
}
7 card Layout
Ext.onReady(function() {
var i = 0;
var navHandler = function(direction){
i += direction;
Ext.getCmp("card").getLayout().setActiveItem(i);
if (i == 2) {
Ext.getCmp("move-next").setDisabled(true);
} else if (i == 0) {
Ext.getCmp("move-prev").setDisabled(true);
} else {
Ext.getCmp("move-next").setDisabled(false);
Ext.getCmp("move-prev").setDisabled(false);
}
};
var card = new Ext.Panel({
id: "card",
title : 'Example Wizard',
layout : 'card',
activeItem : 0,
bodyStyle : 'padding:15px',
defaults : {
border : false
},
bbar : [{
id : 'move-prev',
text : 'Back',
handler : navHandler.createDelegate(this, [-1]),
disabled : true
}, '->',
{
id : 'move-next',
text : 'Next',
handler : navHandler.createDelegate(this, [1])
}],
items : [{
id : 'card-0',
html : '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
}, {
id : 'card-1',
html : '<p>Step 2 of 3</p>'
}, {
id : 'card-2',
html : '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}]
});
card.render(Ext.getDom("tt"));
});
8 absolute Layout
Ext.onReady(exe);
function exe() {
var form = new Ext.form.FormPanel({
title : 'Absolute Layout',
frame : true,
layout : 'absolute',
x: 100,
y: 40,
height: 500,
layoutConfig : {
extraCls : 'x-abs-layout-item'
},
defaultType : 'textfield',
items : [{
x : 0,
y : 5,
xtype : 'label',
text : 'Send To:'
}, {
x : 60,
y : 0,
name : 'to',
anchor : '100%'
}, {
x : 0,
y : 35,
xtype : 'label',
text : 'Subject:'
}, {
x : 60,
y : 30,
name : 'subject',
anchor : '100%'
}, {
x : 0,
y : 60,
xtype : 'textarea',
name : 'msg',
anchor : '100% 100%'
}]
});
form.render(Ext.getDom("tt"));
}
附上 測試的 html
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Vanlin http://m.tkk7.com/vanlin</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="test_layout_anchor.js"></script>
</head>
<body>
<div id="tt" style="border: 1px thin blue; padding: 10px; margin: 20px;"></div>
</body>
</html>