extjs tabPanel的用法

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);
});

		

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

		

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);
 }
});

		

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

  
标签：tabPanel   
 
 



              
上一篇：ASP.NET压力测试
                	  
			  
下一篇：单元测试中Assert类

  
 


  

      您可能感兴趣
				

					

  
extjs tabPanel的用法
魔兽争霸3自定义战役少年杰雷 2（魔兽争霸3自定义战役少年杰雷）
今日菜价 芥兰涨幅最高 1.33 ，花菜降幅最高 3.10（今日菜价芥兰涨幅最高）
今日菜价 椰菜涨幅最高 3.25 ，水空心菜降幅最高 2.58（今日菜价椰菜涨幅最高）
今日菜价 红三鱼涨幅最高 4.41 ，黄鳝降幅最高 5.06（红三鱼涨幅最高）
今日菜价 西生菜涨幅最高 6.19 ，生菜降幅最高 5.38（西生菜涨幅最高）
今日菜价 青豆角涨幅最高 0.70 ，菜心降幅最高 5.55（青豆角涨幅最高）