extjs学习----官方模版注释3-优快云博客

本文介绍使用ExtJS实现窗口及Tab布局的方法，包括如何设置Tab的活动状态、滚动条行为，以及面板的折叠和边距等属性。通过具体代码示例展示了不同组件配置的应用。

本篇是有关于窗口基本布局的。里面有两个属性。我暂时还没了解到。有人知道的，拿砖砸下我。。。砸醒我。。。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<head>
	<title>test page</title>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
	<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			var button = Ext.get('show-btn');//本句不解释
			button.on('click',function(){
					//tabs for the center
				var tabs = new Ext.TabPanel({
					region:'center',//使用border布局时，定位属性
					margins:'3 3 3 0',
					activeTab:0,//指出初始化时活动的tab选项，默认为都不活动。
					defaults:{//应用在全体组件上的配置项对象，也就是说全部的对象
						autoScroll:true// 当出现内容溢出时，会出现滚动条，false则不会
					},
					items:[{
						title:'bogus tab',
						html:'the first tab'
					},{
						title:'another tab',
						html:'the second tab'
					},{
						title:'Closable tab',
						html: 'the tab can be closed!',
						closable:true//带有关闭小叉叉的
					}]
				});
				//Panel for the west
				var nav = new Ext.Panel({
					title:'navigation',
					region:'west',
					split:'false',
					width:200,
					collapsible:true,
					margins:'3 0 3 3',//？？？？
					cmargins:'3 3 3 3'//？？？？
				});
				var win = new Ext.Window({
					title:'Layout Window',
					closable:true,
					width:600,
					height:400,
					plain:true,
					layout:'border',
					items:[nav,tabs]//将前面定义好的两个面板添加到window中
				});
				win.show(button);
			});
		});
	</script>
</head>
<body>
	<input type="button" id="show-btn" value="show window"/>
</body>
</html>

转载于:https://www.cnblogs.com/hanbin/archive/2011/08/09/2132607.html