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

Creating a tabbed layout with tooltips

Creating a tabbed layout and adding tooltips to the tabs is straight-forward with Ext JS 4. In this recipe we will show you how to create a tab panel with multiple tabs, add tooltip text, and have the framework display the text as you hover over a tab.

How to do it...

  1. Initialize the global QuickTipManager instance. We need this for the tooltips to be displayed:
    Ext.tip.QuickTipManager.init();
  2. Create an Ext.tab.Panel with two tabs (added to the Panel's items collection) and render it to the document's body:
    Ext.create('Ext.tab.Panel', {
        width: 500,
        height: 200,
        style: 'margin: 50px',
        renderTo: Ext.getBody(),
        items: [{
            title: 'Tab One'
        }, {
            title: 'Tab Two'
        }]
    });
  3. In tab two add a tooltip to the tabConfig config ...

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