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

EXTJS里面有很多的example,各路高手都建议初学者去看看,学习。于是我就从窗口开始,一个一个看,一个一个做下注释,备忘个。给自己,也给别人。。。

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

			var button = Ext.get("btn");

			button.on("click",function(){

				if(!win){

					win = new Ext.Window({

						applyTo:'hello-win',//渲染节点

						layout:'fit',//布局方式

						width:500,

						height:300,

						closeAction:'hide',//设置点击右上角关闭按钮时,只是隐藏窗口,而非销毁

						plain:true,//根据API上说是和window.body的背景色有关的,可能因为设置问题,个人没发现true和false有什么不同

						items://加入子组件

							new Ext.TabPanel({

								applyTo:'hello-tabs',//选项卡渲染的div id

								autoTabs:true,//会查询DOM中任何带有"x-tab"样式类的div元素,转化为tab加入到面板中

								activeTab:1,//渲染的tab有两个,0表示初始状态第一个活动,1表示第二个活动。

								deferredRender:true,//标识tab不是在只有第一次访问的时候才渲染,在上面closeAction注视掉的情况下,这个设为true,则窗口在关闭后第二次将不会被渲染。即不显示。

								border:true//显示一套2px宽的内边框

							}),

							buttons:[{

								text:'Submit',

								disabled:true

							},{

								text:'Close',

								handler:function(){

									win.hide();

								}

							}]

					});

				}

				win.show(button);

			});

		});

	</script>

</head>

<body>

	<button id="btn">show window</button>

	<div id="hello-win" class="x-hidden">

		<div class="x-window-header">Hello Dialog</div>

		<div id="hello-tabs">

			<div class="x-tab" title="Hello 111">

				<p>hello......</p>

			</div>

			<div class="x-tab" title="Hello 222">

				<p>....world</p>

			</div>

		</div>

	</div>	

</body>

</html>

  

你可能感兴趣的:(ExtJs)