extjs_08_界面布局

Posted 2020-10-03 mfmdaoyou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了extjs_08_界面布局相关的知识，希望对你有一定的参考价值。
技术分享
<%@ 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_界面布局的主要内容，如果未能解决你的问题，请参考以下文章
Android开发——UI_片段
PyQt5对话框窗口打开时没有布局
Java Swing 图形界面开发(目录)
微信小程序UI------实现携程首页顶部的界面（弹性布局）
这些 C++ 代码片段有啥作用？
Extjs4.1：再现表单布局