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

< 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 >