extjs学习----官方模版注释3

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

<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>

  

你可能感兴趣的:(ExtJs)