O'Reilly logo

Ext JS 4 Web Application Development Cookbook by Stuart Ashworth, Andrew Duncan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Manipulating a tab panel's TabBar

A tab panel's TabBar is the area at the top of its content, which displays a button or tab for each of the child panels within it. By clicking on these tabs the relevant panel is displayed.

These tabs can be extensively customized, and in this recipe, we will discuss how to achieve the following:

  • Configure a tab with an icon
  • Dynamically switch icons
  • Set tabs' widths
  • Change the position of the tab bar
  • Show and hide tabs on the fly

How to do it...

To start with we will create a basic Ext.tab.Panel with three child panels. We will use this as the base for all our examples:

var tabPanel = Ext.create('Ext.tab.Panel', { width: 500, height: 200, style: 'margin: 50px', renderTo: Ext.getBody(), items: [{ title: 'Tab One', html: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required