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