2010.04.12———Ext 之 window_LayoutWindow-CSDN博客

本文链接：https://blog.csdn.net/cody123/article/details/83610948

2010.04.12———Ext 之 window_LayoutWindow

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>布局窗口</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <!-- ext-base.js必须在ext-all前面，不然，Ext无法识别 -->
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
	Ext.get("showMessage").on("click",function(){
		var tabs = new Ext.TabPanel({
			region: "center",
			activeTab: 0,//默认打开时显示那个tab，0就是第一个
			margins:'3 3 3 0', 
			defaults: {autoScroll: true},
			items: [
				{
					title: "tab1",
					html: "<h1>你好 小都</h1>"
				},{
					title: "tab2",
					html:　"<b>呵呵哈哈嘿嘿</b>"
				},{
					title: "tab3",
					html: "<b>怒了分的萨芬倒萨浮点数</b>",
					closable: true
				}]
		});
		var pan = new Ext.Panel({
			region: "west",
			title:　"我是左边",
			width: 200,
			split: true,//分开，容器中间的间隔是否显示
			collapsible: true,//是否可收缩
			margins:'3 0 3 3',//相对于父容器的偏移量 上 右 下 左，顺时针方向
            //cmargins:'3 3 3 3'

		});
		var window = new Ext.Window({
			title:　"一个窗口",
			closable: true,
			width:　600,
			height: 350,
			plain: true,
			layout: "border",//一个多个区块，面向应用的UI布局格式
			items: [tabs,pan]
		});
		window.show(this);
	});
});


</script>
</head>

<body>
<input type="button" id="showMessage" value="窗口" />
</body>
</html>