您的位置:首页 > Web前端 > extjs > 正文

extjs tabPanel的用法

更多 时间:2014-6-13 类别:Web前端 浏览量:21642

extjs tabPanel的用法

extjs tabPanel的用法

一、tabPanel主要配置项


activeTab

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

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


deferredRender

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


autoTabSelector

默认为'li.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,                  //自动扫描页面中的有效li然后转换为标签
      deferredRender:false,           //不进行延时渲染
      //deferredRender:true,
      activeTab:0,                    //默认激活第一个标签
      animScroll:true,               //使用动画滚动效果
      enableTabScroll:true,          //tab标签超宽时自动出现滚动条
      applyTo:'panel'                //此处必须使用applayTo定位
     }
    
     new Ext.TabPanel(config);
    }); 
    </script>
    
    <li id="panel">   
    <li class="x-tab" title="tab标签页1">tab标签页1内容</li>   
    <li class="x-tab" title="tab标签页2">tab标签页2内容</li>   
    <li class="x-tab" title="tab标签页3">tab标签页3内容</li>   
    <li class="x-tab" title="tab标签页4">tab标签页4内容</li>   
    <li class="x-tab" title="tab标签页5">tab标签页5内容</li>   
    </li>   
    
       
    <li class="x-tab" title="tab标签页6">无效tab标签页6内容</li>  
    
    		
  •  

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