<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Hello World Window Example</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-debug.js"></script>
<style type="text/css">
.x-panel-body p {
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var win;
var button = Ext.get('show-btn');
button.on('click', function() {
if (!win) {
win = new Ext.Window({
applyTo: 'Container',
layout: 'fit', //fit佈局會使容器內的組件自動充滿容器(Resize容器時，自動重繪)
//title:"new Title",//不加這一句時，會自動尋找Container中樣式爲x-window-header的div，將其內容做爲window的title
width: 500,
height: 300,
closeAction: 'hide',//關閉後，僅隱藏，方便下次再顯示
plain: true,
items: new Ext.TabPanel({
applyTo: 'hello-tabs',
autoTabs: true, //加上這個後，會在hello-tabs裏自動尋找樣式爲x-tab的div，根據title標識創建tab，根據div內容創建tab內容
activeTab: 0,
deferredRender: false,
border: false
}),
buttons: [{
text: 'Submit',
disabled: true
}, {
text: 'Close',
handler: function() {
win.hide();
}
}]
});
}
win.show(button);//注意win.show()與win.show(button)的區別，show(button)會使彈出窗口看起來象從button上彈出來的，具有動畫效果，而win.show()則沒有這一動畫效果
});
});
</script>
<input type="button" id="show-btn" value="Hello World" /><br /><br />
<div id="Container" class="x-hidden">
<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">
<div class="x-tab" title="Hello World 1">
<p>Hello![]()
</p>
</div>
<div class="x-tab" title="Hello World 2">
<p>![]()
World!</p>
</div>
</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Hello World Window Example</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-debug.js"></script>
<style type="text/css">
.x-panel-body p {
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var win;
var button = Ext.get('show-btn');
button.on('click', function() {
if (!win) {
win = new Ext.Window({
applyTo: 'Container',
layout: 'fit', //fit佈局會使容器內的組件自動充滿容器(Resize容器時，自動重繪)
//title:"new Title",//不加這一句時，會自動尋找Container中樣式爲x-window-header的div，將其內容做爲window的title
width: 500,
height: 300,
closeAction: 'hide',//關閉後，僅隱藏，方便下次再顯示
plain: true,
items: new Ext.TabPanel({
applyTo: 'hello-tabs',
autoTabs: true, //加上這個後，會在hello-tabs裏自動尋找樣式爲x-tab的div，根據title標識創建tab，根據div內容創建tab內容
activeTab: 0,
deferredRender: false,
border: false
}),
buttons: [{
text: 'Submit',
disabled: true
}, {
text: 'Close',
handler: function() {
win.hide();
}
}]
});
}
win.show(button);//注意win.show()與win.show(button)的區別，show(button)會使彈出窗口看起來象從button上彈出來的，具有動畫效果，而win.show()則沒有這一動畫效果
});
});
</script>
<input type="button" id="show-btn" value="Hello World" /><br /><br />
<div id="Container" class="x-hidden">
<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">
<div class="x-tab" title="Hello World 1">
<p>Hello
</p></div>
<div class="x-tab" title="Hello World 2">
<p>
World!</p></div>
</div>
</div>
</body>
</html>
