Ext.tabPanel 独孤九剑-第一式

Ext.tabPanel 独孤九剑-第一式

<% @ page contentType = " text/html;charset=UTF-8 " %>
< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />
         < title > onReady </ title >
         < link  rel ="stylesheet"  type ="text/css"
            href ="/ext/resources/css/ext-all.css"   />
         < script  type ="text/javascript"  src ="/ext/adapter/ext/ext-base.js" ></ script >
         < script  type ="text/javascript"  src ="/ext/ext-all.js" ></ script >
         < script  type ="text/javascript" >
             function  myPanel()
            {
                 var  panel  =   new  Ext.Panel(
                            {
                                id: 'myPanel_1',         // 通过id可以找到这个组件
                                 title: 'My Panel',       // 标题
                                 collapsible:  true ,       // 右上角上的那个收缩按钮，设为false则不显示
                                 renderTo: 'hello',       // 这个panel显示在html中id为container的层中
                                 draggable: true ,          // 是否可以拖动
                                 titleCollapse:  true ,     // 是否点击标题栏的任何地方都能收缩
                                 autoScroll: true ,         // 设为true则内容溢出的时候产生滚动条，默认为false
                                 width: 400 ,
                                 height: 200 ,
                                 html:  " <p>我是内容，我包含的html可以被执行！</p> " // panel主体中的内容，可以执行html代码
                             });
             }
              // 实现的延迟加载
              function  myTabPanel_A()
             {
                  var  panel = new  Ext.TabPanel(
                         {width: 300 ,height: 200 ,items:[
                                                         {
                                                             contentEl: " tabOne " , // 标签页的页面元素id(加入你想显示的话)
                                                             title: " HuyVanpull's Panel " ,
                                                              activeTab: 1 ,  // 当前激活标签
                                                              height: 30 ,
                                                              closable: true
                                                         },
                                                         {
                                                             contentEl: " tabTwo " , // 标签页的页面元素id(加入你想显示的话)
                                                             title: " Hui Wanpeng's Panel " ,
                                                              height: 30 ,
                                                              closable: true
                                                         }
                                                     ]});
                 panel.render( " container " );
             }
              function  myTabPanel_B()
             {
                  var  panel = new  Ext.TabPanel(
                         {width: 300 ,height: 200 ,items:[
                                                         {
                                                             contentEl: " tabOne " , // 标签页的页面元素id(加入你想显示的话)
                                                             title: " HuyVanpull's Panel " ,
                                                              activeTab: 1 ,  // 当前激活标签
                                                              height: 30 ,
                                                              closable: true
                                                         },
                                                         {
                                                             contentEl: " tabTwo " , // 标签页的页面元素id(加入你想显示的话)
                                                             title: " Hui Wanpeng's Panel " ,
                                                              height: 30 ,
                                                              closable: true
                                                         }
                                                     ]});
                 panel.render( " container " );
             }
             Ext.onReady(myTabPanel_A); 
         </ script >
     </ head >
     < body >
         < div  id ="container" ></ div >
         < div  id ="tabOne"  class ="x-hide-display" >
            i am Huyvanpull!
         </ div >
         < div  id ="tabTwo"  class ="x-hide-display" >
            i am Hui Wanpeng!
         </ div >
     </ body >
</ html >