extjs官网 Window Samples 之HelloWorld-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_343/article/details/81929412

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Hello World Window Example</title>
		<meta http-equiv="content-type" content="text/html; charset=gbk">
		<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
		<script type="text/javascript" src="js/ext-base.js"></script>
		<script type="text/javascript" src="js/ext-all.js"></script>

		<script type="text/javascript">
			Ext.onReady(function(){
				var win;
				var button=Ext.get('show-btn');

				button.on('click',function(){
					//首次click时,win为undefined,!win为true;
					if(!win){
						win=new Ext.Window({
							applyTo:'hello-win',
							layout:'fit', //自适应
							width:500,
							height:300,
							closeAction:'hide',//简单地隐藏窗口,默认的操作是'close'
							plain:true,//把窗体的body区域用一个透明背景来渲染， 这样它将被融合进框架元素

							items: new Ext.TabPanel({
								applyTo:'hello-tabs',
								autoTabs:true,
								activeTab:1, //标签页的一个字符串id或者一个数字索引，在渲染时内部激活
								deferredRender:false,//每个标签页是否在第一次被访问时才渲染
								border:false
							}),

							buttons:[{
								text:'Submit',
								disabled:true
							},{
								text:'Close',
								handler:function(){
									win.hide();
								}
							}]
						});
					}
					win.show(this);
				});
			});
		</script>
	</head>

	<body>
		<input type="button" id="show-btn" value="Hello World" />
		<div id="hello-win" class="x-hidden">
			<div class="x-window-header">Hello Dialog</div>
			<div id="hello-tabs">
				<!-- Auto create tab 1 -->
				<div class="x-tab" title="Hello World 1">
					<p>Hello...</p>
				</div>
				<!-- Auto create tab 2 -->
				<div class="x-tab" title="Hello World 2">
					<p>... World!</p>
				</div>
			</div>
		</div>
	</body>
</html>