您的位置：首页 > Web前端 > JavaScript

extjs_08_界面布局

2017-08-19 12:13 441 查看 






















<%@ 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航