ExtJS中layout的12种布局风格
· absolute 顾名思义，在容器内部，根据指定的坐标定位显示
layout: "absolute",
items:[{
title: "Panel 1",
x: 50,
y: 50,
html: "Positioned at x:50, y:50"
}]
· accordion 这个是最容易记的，手风琴效果
<!DOCTYPE html>
<html>
<head>
<title>hello-extjs</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入extjs样式文件 -->
<link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
<!-- 引入extjs库文件，底层驱动 -->
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<!-- 引入extjs-all -->
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
<script type="text/javascript">
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:""}
]
}
);
});
</script>
</head>
<body>
This is my HTML page. <br>
<div id="paneldiv"></div>
</body>
</html>
· anchor 这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
<!DOCTYPE html>
<html>
<head>
<title>hello-extjs</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入extjs样式文件 -->
<link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
<!-- 引入extjs库文件，底层驱动 -->
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<!-- 引入extjs-all -->
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
<script type="text/javascript">
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();
});
</script>
</head>
<body>
This is my HTML page. <br>
<div id="paneldiv"></div>
</body>
</html>
· border 将容器分为五个区域:east东(右),south南(下),west西(左),north北(上),center中
layout:"border",
defaults: {
collapsible: true,
split: true,
bodyStyle: "padding:15px"
},
items: [{
title: "Footer",
region: "south",
height: 150,
minSize: 75,
maxSize: 250,
cmargins: "5 0 0 0"
},{
title: "Navigation",
region:"west",
margins: "5 0 0 0",
cmargins: "5 5 0 0",
width: 175,
minSize: 100,
maxSize: 250
},{
title: "Main Content",
collapsible: false,
region:"center",
margins: "5 0 0 0"
}]
· card (TabPanel)
<!DOCTYPE html>
<html>
<head>
<title>hello-extjs</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入extjs样式文件 -->
<link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
<!-- 引入extjs库文件，底层驱动 -->
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<!-- 引入extjs-all -->
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
<script type="text/javascript">
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);
});
});
</script>
</head>
<body>
This is my HTML page. <br>
<button id="show-btn">button</button>
</body>
</html>
· card (Wizard)
您可以使用一张卡片布局来创建您自己的自定义向导式界面。布局是一个标准的CardLayout底部工具栏,和开发人员必须提供导航功能,实现了向导的业务逻辑(参见代码基础。js)。
layout:"card",
activeItem: 0, // index or id
bbar: ["->", {
id: "card-prev",
text: "« Previous"
},{
id: "card-next",
text: "Next »"
}],
items: [{
id: "card-0",
html: "Step 1"
},{
id: "card-1",
html: "Step 2"
},{
id: "card-2",
html: "Step 3"
}]
· column 把整个容器看成一列,然后向容器放入子元素时
layout:"column",
items: [{
title: "Width = 25%",
columnWidth: .25,
html: "Content"
},{
title: "Width = 75%",
columnWidth: .75,
html: "Content"
},{
title: "Width = 250px",
width: 250,
html: "Content"
}]
· fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
layout:"fit",
items: {
title: "Fit Panel",
html: "Content",
border: false
}
· form 是一种专门用于管理表单中输入字段的布局
<!DOCTYPE html>
<html>
<head>
<title>hello-extjs</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入extjs样式文件 -->
<link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
<!-- 引入extjs库文件，底层驱动 -->
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<!-- 引入extjs-all -->
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
<script type="text/javascript">
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();
});
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
· table 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列
<!DOCTYPE html>
<html>
<head>
<title>hello-extjs</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入extjs样式文件 -->
<link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
<!-- 引入extjs库文件，底层驱动 -->
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<!-- 引入extjs-all -->
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel(
{
renderTo:"paneldiv",
title:"容器组件",
layout:"table",
width:500,
height:200,
layoutConfig:{columns:3},//将父容器分成3列
items:[
{title:"元素1",html:"ssssssssss",rowspan:2,height:100},
{title:"元素2",html:"dfffsddsdfsdf",colspan:2},
{title:"元素3",html:"sdfsdfsdf"},
{title:"元素4",html:""}
]
});
});
</script>
</head>
<body>
This is my HTML page. <br>
<div id="paneldiv"><div>
</body>
</html>
VBox
布局,允许子元素的垂直和水平拉伸,就像集装箱布局与规模管理。
layout: {
type: "vbox"
align : "stretch",
pack : "start",
},
items: [
{html:"panel 1", flex:1},
{html:"panel 2", height:150},
{html:"panel 3", flex:2}
]
HBox
布局,允许子元素的垂直和水平拉伸,就像列布局,但垂直延伸项目。
layout: {
type: "hbox",
pack: "start",
align: "stretch"
},
items: [
{html:"panel 1", flex:1},
{html:"panel 2", width:150},
{html:"panel 3", flex:2}
]
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： PHP使用3种方法实现数据采集
- 下一篇： 简单、 灵活、强大的PHP采集工具，让采集更简单一点。
