extjs_08_界面布局
阿新 • • 發佈：2017-08-19
span out pan nim efault user con dtd app
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<!-- 引入樣式，能夠把ext-all.css換成ext-all-access.css | ext-all-gray.css改變樣式-->
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
<!-- 開發模式引入ext-all-debug.js，公布模式引入ext-all.js -->
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<!-- 語言包 -->
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
//絕對布局
Ext.create("Ext.form.Panel", {
title : "Absolute Layout",
width : 300,
height : 275,
layout : {
type : "absolute"
},
defaultType : "textfield",//默覺得文本類型
items : [ {
x : 10,
y : 10,
xtype : "label",
text : "username:"
}, {
x : 80,
y : 10,
name : "to",
anchor : "90%"//定義位置(錨)
}, {
x : 10,
y : 40,
xtype : "label",
text : "password:"
}, {
x : 80,
y : 40,
name : "subject",
anchor : "90%"
}, {
x : 0,
y : 80,
xtype : "textareafield",
name : "msg",
anchor : "100% 100%",//寬和高
value : "文本域默認值"
} ],
renderTo : Ext.getBody()
});
//手風琴布局
Ext.create("Ext.panel.Panel", {
title : "Accordion Layout",
width : 300,
height : 300,
defaults : {
bodyStyle : "padding:15px"//用戶自己定義CSS樣式被應用到panel的body元素上
},
layout : {
type : "accordion",
titleCollapse : true,//同意通過點擊標題欄的任何位置來展開/收縮子項Panel
animate : true,//表示對所含面板進行展開/收縮時, 面板的打開/關閉使用動畫效果
//'true'表示當每一個面板展開時, 都將面板移動到容器的第一個. 'false' 則保持順序不變.
activeOnTop : true
},
items : [ {
title : "Panel 1",
html : "Panel content!"
}, {
title : "Panel 2",
html : "Panel content!"
}, {
title : "Panel 3",
html : "Panel content!"
} ],
renderTo : Ext.getBody()
});
//錨定布局
Ext.create("Ext.Panel", {
width : 500,
height : 400,
title : "AnchorLayout Panel",
layout : "anchor",
renderTo : Ext.getBody(),
items : [ {
xtype : "panel",
title : "75% Width and 20% Height",
anchor : "75% 20%"
}, {
xtype : "panel",
title : "Offset -300 Width & -200 Height",
anchor : "-300 -200"
}, {
xtype : "panel",
title : "Mixed Offset and Percent",
anchor : "-250 20%"
} ]
});
//自己主動布局
Ext.create("Ext.Panel", {
width : 500,
height : 280,
title : "AutoLayout Panel",
layout : "auto",
renderTo : document.body,
items : [ {
xtype : "panel",
title : "Top Inner Panel",
width : "75%",
height : 90
}, {
xtype : "panel",
title : "Bottom Inner Panel",
width : "75%",
height : 90
} ]
});
//邊界布局
Ext.create("Ext.panel.Panel", {
width : 500,
height : 300,
title : "Border Layout",
layout : "border",
items : [ {
title : "South Region is resizable",
region : "south", // position for region
xtype : "panel",
height : 100,
split : true, // 手動調整大小
// 假設有四個值, 則分別依次應用於上,右,下,左.
margins : "0 5 5 5"
}, {
// xtype: "panel" implied by default
title : "West Region is collapsible",
region : "west",
xtype : "panel",
margins : "5 0 0 5",
width : 200,
collapsible : true, // 是否同意收縮
id : "west-region-container",
layout : "fit"
}, {
title : "Center Region",
region : "center", // center region is required, no width/height specified
xtype : "panel",
layout : "fit",
margins : "5 5 0 0"
} ],
renderTo : Ext.getBody()
});
//卡片布局
var p = Ext.create("Ext.tab.Panel", {
width : 500,
height : 300,
layout : "card",
title : "Card Layout",
items : [ {
title : "Card 1",
html : "Card 1"
}, {
title : "Card 2",
html : "Card 2"
} ],
renderTo : Ext.getBody()
});
p.getLayout().setActiveItem(0);//激活指定的面板.
//列布局
// All columns are percentages -- they must add up to 1
Ext.create("Ext.panel.Panel", {
title : "Column Layout - Percentage Only",
width : 350,
height : 250,
layout : "column",
items : [ {
title : "Column 1",
columnWidth : 0.25
}, {
title : "Column 2",
columnWidth : 0.55
}, {
title : "Column 3",
columnWidth : 0.20
} ],
renderTo : Ext.getBody()
});
// Mix of width and columnWidth -- all columnWidth values must add up
// to 1. The first column will take up exactly 120px, and the last two
// columns will fill the remaining container width.
Ext.create("Ext.Panel", {
title : "Column Layout - Mixed",
width : 350,
height : 250,
layout : "column",
items : [ {
title : "Column 1",
width : 120
}, {
title : "Column 2",
columnWidth : 0.7
}, {
title : "Column 3",
columnWidth : 0.3
} ],
renderTo : Ext.getBody()
});
//填充布局
Ext.create("Ext.panel.Panel", {
title : "Fit Layout",
width : 300,
height : 150,
layout : "fit",
items : {
title : "Inner Panel",
html : "This is the inner panel content",
bodyPadding : 20,//這個值被應用到全部的邊界
border : false
},
renderTo : Ext.getBody()
});
//橫向布局
Ext.create("Ext.Panel", {
width : 500,
height : 300,
title : "HBoxLayout Panel",
layout : {
type : "hbox",
align : "stretch"
},
renderTo : document.body,
items : [ {
xtype : "panel",
title : "Inner Panel One",
width : 200
}, {
xtype : "panel",
title : "Inner Panel Two",
flex : 1
}, {
xtype : "panel",
title : "Inner Panel Three",
flex : 1
} ]
});
//縱向布局
Ext.create("Ext.Panel", {
width : 500,
height : 400,
title : "VBoxLayout Panel",
layout : {
type : "vbox",
align : "center"
},
renderTo : document.body,
items : [ {
xtype : "panel",
title : "Inner Panel One",
width : 250,
flex : 2
}, {
xtype : "panel",
title : "Inner Panel Two",
width : 250,
flex : 4
}, {
xtype : "panel",
title : "Inner Panel Three",
width : "50%",
height : 200
} ]
});
//表格布局
Ext.create("Ext.panel.Panel", {
title : "Table Layout",
width : 300,
height : 150,
layout : {
type : "table",
// The total column count must be specified here
columns : 3
},
defaults : {
// applied to each contained panel
bodyStyle : "padding:20px"
},
items : [ {
html : "Cell A content",
rowspan : 2
}, {
html : "Cell B content",
colspan : 2
}, {
html : "Cell C content",
cellCls : "highlight"
}, {
html : "Cell D content"
} ],
renderTo : Ext.getBody()
});
})
</script>
</head>
<body>
<br>
</body>
</html>
extjs_08_界面布局