- Ext.require(
- 'Ext.tab.*'
- );
- Ext.onReady(
- function(){
- //添加一个Tab,在最后面添加
- Ext.create(
- 'Ext.Button',
- {
- text:'添加一个Tab',
- renderTo:Ext.getBody(),
- handler:function(){
- tabs.add(
- {
- title:'新添加的tab',
- html:'这个tab是通过add添加的',
- closable:true
- }
- );
- }
- }
- );
- //插入一个tab,可以指定插入的位置
- Ext.create(
- 'Ext.Button',
- {
- text:'插入一个Tab',
- renderTo:Ext.getBody(),
- handler:function(){
- tabs.add(3, //第一个参数是用来指定插入的位置
- {
- title:'新插入的tab',
- html:'这个tab是通过insert插入来的',
- closable:true
- }
- );
- }
- }
- );
- //删除tab---指定删除的位置
- Ext.create(
- 'Ext.Button',
- {
- text:'根据位置删除tab',
- renderTo:Ext.getBody(),
- handler:function(){
- //删除第四位置上的tab
- tabs.remove(4);
- }
- }
- );
- //删除tab---删除指定id的tab
- Ext.create(
- 'Ext.Button',
- {
- text:'根据id删除tab',
- renderTo:Ext.getBody(),
- handler:function(){
- //删除id为tab3的tab
- tabs.remove('tab3');
- }
- }
- );
- //设置活动窗口:
- Ext.create(
- 'Ext.Button',
- {
- text:'设置活动窗口',
- renderTo:Ext.getBody(),
- handler:function(){
- //设置2为活动窗口
- tabs.setActiveTab(2);
- }
- }
- );
- var tabs = Ext.create(
- 'Ext.tab.Panel',
- {
- renderTo:Ext.getBody(),
- activeTab:0,
- width:600,
- height:300,
- plain:true,
- defaults:{
- autoScoll:true
- },
- items:[
- {
- id:'tab1',
- title:'Tabs-1',
- html:'这是一个普通的tab'
- },{
- id:'tab2',
- title:'tab-2',
- contentEl:'tab2'
- },{
- id:'tab3',
- title:'ajax Tab',
- autoLoad:{
- url:'tabAction',
- params:{
- data:'从客户端传入的参数'
- },
- method:'GET'
- }
- },{
- id:'4',
- title:'事件tab',
- listeners:{
- activate:function(tab){
- alert(tab.title + ': activate事件触发。');
- }
- },
- html:'带事件的tab',
- autoLoad:false
- },{
- id:'tab5',
- title:'不可用的tab',
- disabled: true
- }
- ]
- }
- );
- }
- );
其他代码参考上一篇文章
效果图: