以下就是ExtJs的官方示例，只不过加了几行注释，呵
代码语言：js复制<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>
