Sencha Inc. | HTML5 Apps

TabPanel FAQ

Published Sep 17, 2010 | The Sencha Dev Team | FAQ | Medium
Last Updated Jul 11, 2011

This FAQ is most relevant to Ext JS, any version.

This article is currently due for review
We suspect that this article may be out-of-date or contain incorrect information.
But we are constantly editing articles, so we promise we will get to this one soon.

Component does not show up in TabPanel after the tab is changed

Set layoutOnTabChange: true in your TabPanel config.

Refresh a tab's content each time becomes active

This behavior can be achieved one of two ways.

  • The first method uses TabPanels' tabchange event to force a fresh of any newly selected tab item:
new Ext.TabPanel({
   region:'center',
   deferredRender:false,
   activeTab:0,
   defaults:{autoScroll:true},
   listeners: {
      tabchange: function(tp,newTab){
         var um = newTab.getUpdater();
         if(um) um.refresh();
      }
   },
   items:[{
      title: 'Refreshed Panel',
      autoLoad:{url:'dynamicContent.php'}
   }]
});
  • The second method registers the activate event on individual tab panels:
new Ext.TabPanel({
   region:'center',
   deferredRender:false,
   activeTab:0,
   defaults:{autoScroll:true},
   items:[{
      title: 'Refreshed Panel',
      autoLoad:{url:'dynamicContent.php'},
      listeners:{
         activate : function(panel){
            panel.getUpdater().refresh();
         }
      }
   }]
});

Hide tab strip background

  • The resulting html should look resemble this, the key part being "x-tab-panel-header-plain".
x-tab-panel-header x-tab-panel-header-noborder
x-unselectable x-tab-panel-header-plain
new Ext.Window({
    width: 200,
    height : 200,
    items : {
        xtype : 'tabpanel',
        activeTab : 0,
        plain:true,
        layoutOnTabChange : true,
        items : [
            {
                xtype : 'panel',     
                title :'tab1',
                html : 'tab 1'
            }
        ]
    }
}).show();

Modify tab item tooltip dynamically

  • The tabstrip text is a child of the tabstrip item, not of the panel. Use:
Ext.onReady(function() {
 
    Ext.QuickTips.init(); 
    Ext.apply(Ext.QuickTips.getQuickTip(), {
        maxWidth: 200,
        minWidth: 100,
        showDelay: 10,
        trackMouse: true
    });
 
    var x = new Ext.TabPanel({
        xtype:"tabpanel",
        id: 'tabpanel',
        renderTo: Ext.getBody(),
        width:400,
        height: 160,
        activeTab: 0,
        layoutOnTabChange: true,
        items: [{
            xtype: 'panel',
            id: 'panel1',
            title: 'Tab one',
            tabTip: 'This is the initial tip on the <b>first</b> tab'
        },{
            xtype: 'panel',
            id: 'panel2',
            title: 'Tab two',
            tabTip: 'This is the initial tip on the <b>second</b> tab, disabled',
            disabled: true
        },{
            xtype: 'panel',
            id: 'panel3',
            title: 'tab three',
            tabTip: 'This is the initial tip on the <b>third</b> tab',
            listeners: {
                 beforeshow: function(p) {
                    var tabPanel = p.ownerCt;
                    var tabEl = tabPanel.getTabEl(prmPanel);
                    Ext.fly(tabEl).child('span.x-tab-strip-text', 
                        true).qtip = 'Tab is now enabled';    
                    Ext.getCmp('panel2').enable();				
                }
            }
        }]
    });	// eof new Ext.Panel
});	// eof onReady()

Tab Events

  • See this post for which tab events actually fire.
  • TabPanel items fire an activate event. TabPanel itself fires a tabchange event.
Share this post:
Leave a reply

Written by The Sencha Dev Team

Commenting is not available in this channel entry.