ExtJs学习笔记(9)_Window的基本用法

以下就是ExtJs的官方示例，只不过加了几行注释，呵
<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>