Ext.TabPanel 的使用

1、选项板概述

  选项面板是一个包括一个或多个选项卡(Tab),同一时刻只显示一个选项卡的这种用户界面。比如下图的IE选项设置界面中,就是一个选项板的应用,选项板上有“常规”、“安全”、“隐私”等选项卡。

2、Ext.TabPanel

  Ext中提供了选项板控件TabPanel,由类Ext.TabPanel来定义,该类直接继承自Ext.Panel,因此他实际上也是一个包含特定特性的面板。看下面的代码:

 

  1. Ext.onReady(function(){
  2.   var tab=new Ext.TabPanel({
  3.   renderTo:"test",
  4.   width:500,
  5.   height:200,
  6.   enableTabScroll:true,
  7.   activeTab:0,
  8.   items:[
  9.           {title:"面板1", html:"<h1>this is the first panel!</h1>"},
  10.           {closable : true,title:"面板2", html:"<h1>this is the second panel!</h1>"},
  11.     {closable : true,title:"面板3", html:"<h1>this is the third panel!</h1>"}
  12.   ]
  13.   });
  14.    });

上面的代码定义了一个简单的选项面板,该面板中包含三个tab,初始化时显示第一个tab内容。

3、另外一种使用选项板的方式

  也可以直接把html页面中符合特殊条件的DIV标签转换成选项板中的选项,此时需要在TabPanel的配置选项中把autoTabs项设置为true,把deferredRender项设置为false,然后通过applyTo项指定把页面中包含class="x-tab"这种样式的子节点的DOM节点应用于选项板。看下面的例子:

 

  1. Ext.onReady(function(){
  2.    var tabs =new Ext.TabPanel({
  3.      applyTo: 'test',
  4.      activeTab: 0,
  5.      deferredRender: false,
  6.      autoTabs: true
  7.    });
  8. });

  9.   <div id="test">
  10.       <div class="x-tab"title="选项1">A simple tab</div>
  11.       <div class="x-tab"title="选项2">Another one</div>
  12.       <div title="选项3">dsfdsfd<divclass="x-tab"title="选项4">Another one</div></div>
  13.  </div>

  由于“选项3”这个DIV标签的class不是x-tab所以不会转换成选项卡Tab,而“选项4”这个DIV虽然与“选项1”这些节点不在同一个层次,但仍然会把他作为Tab项来同等处理。

4、控制选项板的内容

  选项板TabPanel中的选项Tab项可以在初始化的时候通过items时候指定,也可以在TabPanel对象创建以后,使用add()、insert()或remove等来动态添加或删除其中的选项卡Tab。为了演示对面板中tab的操作,我们可以给上面的程序简单的添加一个工具栏按钮,当点击按钮的时候在选项面板中动态添加tab。代码如下:

 

  1. Ext.onReady(function(){
  2.   var i=0;
  3.   var tab=new Ext.TabPanel({
  4.   renderTo:"test",
  5.   width:500,
  6.   height:200,
  7.   enableTabScroll:true,
  8.   activeTab:0,
  9.   bbar:[
  10.          {text:"添加",handler:function(){
  11.                                tab.add({title:"新面板"+i++,closable: true}
  12.                              );
  13.          }
  14.   }],
  15.   items:[
  16.           {title:"面板1", html:"<h1>this is the first panel!</h1>"},
  17.           {closable : true,title:"面板2", html:"<h1>this is the second panel!</h1>"},
  18.           {closable : true,title:"面板3", html:"<h1>this is the third panel!</h1>"}
  19.   ]
  20.   });

  21.  });

  添加按钮的事件响应函数内容如下:

  tab.add({title:"新面板"+i++,closable: true});

  我们直接调用选项面板的add方法,就可以把一个面板添加到选项板中,成为一个新的tab。closeable表示该面板可以关闭,因此在tab上会出现一个关闭tab的图标,点击该图标可以关闭该面板。

  可以使用迭代功能,实现批量关闭选项板TabPanel中的所有Tab,比如,可以在上面的bbar中,添加一个按钮来实现关闭所有打开的Tab,该按钮的定义代码如下:

 

  1. {text:"关闭所有面板",handler:function(){
  2.   tab.items.each(function(p){
  3.      if(p.closable)tab.remove(p);
  4.   });
  5. }}
  1. /*
  2.  * tabpanel的使用
  3.  */

  4. function isRender(p){
  5.     Ext.MessageBox.alert(p.title+"被渲染了。")
  6. }
  7. Ext.onReady(function(){
  8.     var i=0;
  9.     var tabpanel = new Ext.TabPanel({
  10.         deferredRender:false,// 默认情况下tab不会被渲染,但是tab间有关联的情况下需要关闭延迟渲染
  11.         tabPosition:"top",//默认情况下是top
  12.         //添加工具栏
  13.         bbar:[
  14.                 {text:"添加选项",handler:function(){
  15.                     var id="tab"+i;
  16.                     tabpanel.add({id:id,title:"子面板"+i++});
  17.                     tabpanel.setActiveTab(id);
  18.                 }},
  19.                 {text:"删除选项", handler:function(){
  20.                     var tab = tabpanel.getActiveTab();
  21.                     tabpanel.remove(tab);
  22.                 }}
  23.         ],
  24.         activeTab: 1,//默认打开第二个
  25.         //Tabpnale里面的选项是一个Panel
  26.         items:[
  27.             {xtype:"panel",title: "面板1",html:"内容....",listeners:{render:isRender}},
  28.             {title:"面板2", autoLoad:"news.html"},
  29.             {title:"News", autoLoad:"news2.jsp",closable:true}
  30.         ]
  31.     });
  32.     
  33.     new Ext.Viewport({layout:"fit",items:tabpanel});
  34.     //tabpanel1();
  35. });

sdf



1.通过items添加标签页

[javascript]


Ext.onReady(function(){
 var config = {
  height:150,
  width:300,
  activeTab:0,                  //默认激活第一个tab页
  animScroll:true,             //使用动画滚动效果
  enableTabScroll:true,        //tab标签过宽时自动显示滚动条
  renderTo:'panel',
  //通过items将标签页以子面板的方式加入TabPanel
  items:[
   {title:'tab标签页1',html:'tab标签页1内容'},
   {title:'tab标签页2',html:'tab标签页2内容'},
   {title:'tab标签页3',html:'tab标签页3内容'},
   {title:'tab标签页4',html:'tab标签页4内容'},
   {title:'tab标签页5',html:'tab标签页5内容'}
  ]
 }
 
 new Ext.TabPanel(config);
});

 

2.通过页面div自动添加标签页

[javascript]


  1. Ext.onReady(function(){
     var config = {
      height:50,
      width:300,
      autoTabs:true,                 //自动扫描页面中的有效div然后转换为标签
      deferredRender:false,          //不进行延时渲染
      //deferredRender:true,
      activeTab:0,                   //默认激活第一个标签
      animScroll:true,              //使用动画滚动效果
      enableTabScroll:true,         //tab标签超宽时自动出现滚动条
      applyTo:'panel'               //此处必须使用applayTo定位
     }
         
  2.       
     
     
     new Ext.TabPanel(config);
    });

 

[xhtml]


  1. <div id="panel">  
  2. <div class="x-tab" title="tab标签页1">tab标签页1内容</div>  
  3. <div class="x-tab" title="tab标签页2">tab标签页2内容</div>  
  4. <div class="x-tab" title="tab标签页3">tab标签页3内容</div>  
  5. <div class="x-tab" title="tab标签页4">tab标签页4内容</div>  
  6. <div class="x-tab" title="tab标签页5">tab标签页5内容</div>  
  7. </div>  
  8.   
  9. <div class="x-tab" title="tab标签页6">无效tab标签页6内容</div> 

 

3.动态添加标签页

[javascript]


Ext.onReady(function(){
 var config = {
  height:150,
  width:300,
  activeTab:0,                   //默认激活第一个tab页
  animScroll:true,              //使用动画滚动效果
  enableTabScroll:true,         //tab标签超宽时自动出现滚动按钮
  renderTo:'panel',
  items:[
   {title:'tab标签页1',html:'tab标签页1内容'}
  ],
  //自动添加标签的按钮
  buttons:[
   {
    text:'添加标签页',
    handler:addTabPage     //处理函数
   }
  ]
 }
 
 var tabPanel = new Ext.TabPanel(config);
 
 //添加tab页
 function addTabPage()
 {
  var index =tabPanel.items.length + 1;
  
  //创建新标签页
  var tabPage =tabPanel.add({
   title:'tab标签页'+ index,
   html:'tab标签页'+ index + '内容',
   closable:true                          //允许关闭该标签页
  });
  
  //设置当前显示的标签页
  tabPanel.setActiveTab(tabPage);
 }
});

TabPanel 加载  .jsp页面的方式:

var config = {
    activeTab:0,                   //默认激活第一个tab    animScroll:true,              //使用动画滚动效果
    enableTabScroll:true,         //tab标签过宽时自动显示滚动条
    renderTo:'panel',
    //通过items将标签页以子面板的方式加入TabPanel
    items:[
        {title:'拓扑模板1',
        html:'<iframe src="net_tuopu.jsp" width="95%" height="95%" ></iframe>'
        },
        {title:'tab标签页2',html:'tab标签页2内容'}
    ]
}
//alert(123);
new Ext.TabPanel(config);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值