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 >

效果图：