ExtJs学习笔记(10)_Window窗口的Border布局

以下源自ExtJs的官方示例,稍加注释而已
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Window LayOut</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 button = Ext.get('show-btn');
 var win;
 
         button.on('click', function() {
 
 //创建TabPanel
  var tabs = new Ext.TabPanel({
                 region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
                 margins: '3 3 3 0',
                 activeTab: 0,
                 defaults: {
                     autoScroll: true
                 },
                 items: [{
                     title: 'Bogus Tab',
                     html: "第一个Tab的内容."
                 }, {
                     title: 'Another Tab',
                     html: "我是另一个Tab"
                 }, {
                     title: 'Closable Tab',
                     html: "这是一个可以关闭的Tab",
                     closable: true
 }]
                 });
 
 //定义一个Panel
  var nav = new Ext.Panel({
                     title: 'Navigation',
                     region: 'west', //放在西边，即左侧
                     split: true,
                     width: 200,
                     collapsible: true, //允许伸缩
                     margins: '3 0 3 3',
                     cmargins: '3 3 3 3'
                 });
 
 //如果窗口第一次被打开时才创建
  if (!win) {
                     win = new Ext.Window({
                         title: 'Layout Window',
                         closable: true,
                         width: 600,
                         height: 350,
                         border : false,
                         plain: true,
                         layout: 'border',
                         closeAction:'hide',
                         items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
                     });
                 }
                 win.show(button);
             });
         });
 </script>
 
 <input type="button" id="show-btn" value="Show Window"/>
 
 </body>
 </html>
效果图：