extjs官网 Window Samples 之HelloWorld

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值