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的用法
AMD YES A卡还是N卡 A卡和N卡的区别（AMDYESA卡还是N卡）
以后显卡多了一个新选择，N卡和A卡外又多了个I卡（以后显卡多了一个新选择）
读卖乐园的彩灯（读卖乐园的彩灯）
新疆80后在淘宝卖干果 以前是 不务正业 如今帮乡亲致富（新疆80后在淘宝卖干果）
弄清楚了销 售 买 卖这四个字，母婴生意做起来就没那么难了（弄清楚了销售买）
数读 买首饰金是 投资黄金 吗 买金容易卖金难（数读买首饰金是）