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://www.blogjava.net/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>