15.extjs tabPanel的用法

转自：https://blog.csdn.net/mezhaha/article/details/78878894

本文导读：TabPanel继承于Ext.Panel，Ext.TabPanel就是有选项卡的Panel，可以在选项卡之间切换。它是多个不同内容的容器，任意组件直接使用add()函数便可添加到Ext.TabPanel中。通过activeTab指定激活哪个面板，索引从0开始。下面介绍extjs中tabPanel的用法

一、tabPanel主要配置项

activeTab

初始激活的tab，索引或者id值，默认为none
 
autoTabs

是否自动将带有'x-tab'样式类的div转成tabs添加到TabPanel中，默认为false。当该配置项设为true时，需要设deferredRender为false，还必须使用applyTo。

deferredRender

是否延迟渲染，默认为true。

autoTabSelector

默认为'div.x-tab'。
 
resizeTabs

是否可以改变tab的尺寸，默认为false。

minTabWidth

tab的最小宽度，默认为30。

tabWidth

每个新增加的tab宽度，默认为120。

tabTip

tab的提示信息
 
tabPosition

tab位置，可选值有top、bottom，默认为top

enableTabScroll

是否允许Tab溢出时可以滚动，默认为false。

closable

tab是否可关闭，默认为false
 
scrollDuration

每次的滚动时长，默认为0.35毫秒。

scrollIncrement

每次的滚动步长，默认为100像素。

wheelIncrement

每次鼠标滑轮的滚动步长，默认为20像素。

二、tabPanel主要方法

getActiveTab()

获取当前活动的tab

get( String/Number key )

根据组件id或者索引获取组件

getItem(String id)

根据tab id获取tab

setActiveTab( String/Number item )

设置某个面板为活动面板

remove( Component/String component, [Boolean autoDestroy] )

移除某个面板

removeAll( [Boolean autoDestroy] )

移除所有面板

三、Tab的正文内容获取方式

1、基本方式 : 通过定义html和items的方式。

 

JScript 代码   复制

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.读取其他html的信息 : 通过设置contentEl就可以获取其他html的信息为当前tab正文。

 

HTML 代码   复制

<script>
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定位
 }

 new Ext.TabPanel(config);
});
</script>

<div id="panel">
<div class="x-tab" title="tab标签页1">tab标签页1内容</div>
<div class="x-tab" title="tab标签页2">tab标签页2内容</div>
<div class="x-tab" title="tab标签页3">tab标签页3内容</div>
<div class="x-tab" title="tab标签页4">tab标签页4内容</div>
<div class="x-tab" title="tab标签页5">tab标签页5内容</div>
</div>


<div class="x-tab" title="tab标签页6">无效tab标签页6内容</div>

3、读取服务端数据:通过定义autoLoad异步方式获取服务端数据。

4、动态添加标签页

 

JScript 代码   复制

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完整实例

 

JScript 代码   复制

function myRender(p){
    Ext.Msg.alert("提示",p.title+"渲染成功") ;
}
Ext.onReady(function(){
    var i = 4 ;
    //注意:每个Tab标签只渲染一次
    var tabs = new Ext.TabPanel({
        renderTo: Ext.getBody(),//绑定在body标签上
        activeTab: 0,//初始显示第几个Tab页
        deferredRender: false,//是否在显示每个标签的时候再渲染标签中的内容.默认true
        tabPosition: 'top',//表示TabPanel头显示的位置,只有两个值top和bottom.默认是top.
        enableTabScroll: true,//当Tab标签过多时,出现滚动条
        items: [{//Tab的个数
            title: 'Tab 1',
            html: 'A simple tab',
            listeners: {render:function(){//为每个Tab标签添加监听器.当标签渲染时触发
                Ext.Msg.alert("Tab 1","渲染Tab 1成功") ;
            }}
        },{
            title: 'Tab 2',
            html: 'Another one',
            listeners: {render: myRender}
        },{
            title: 'Tab 3',
            autoLoad: 'test.html',
            closable: true,
            listeners: {render: myRender}
        }],
        bbar:[{//添加一个底部工具栏,并且在该工具栏上添加两个按钮
            text:'添加标签',
            handler:function(){//添按钮被点击时触发这个匿名函数(注意:该属性在button中能查到).
                var id = i ;
                tabs.add({//添加一个Tab标签
                    id: id,
                    title:'Tab '+i,
                    closable: true
                }) ;
                i=i+1;
                tabs.setActiveTab(id) ;//当id为"id"的Tab标签显示(变为活动标签).
            }
        },{
            text:'删除标签',
            handler: function(){
                var t = tabs.getActiveTab();//获得当前活动标签的引用
                if(t.closable){
                    tabs.remove(t);//删除标签
                }else{
                    Ext.Msg.alert("提示","该标签不能关闭") ;
                }
            }
        }]
    });   

    //把TabPanel组件充满整个body容器.
    new Ext.Viewport({
        layout: 'fit',
        items: tabs
    });
});