ExtJS 4: How to Add Tooltip to Grid Header

DZone's Guide to

ExtJS 4: How to Add Tooltip to Grid Header

This tutorial will walk through out how to add a tooltip to a Grid Header.

Loiane Groner

Oct. 07, 11 · Web Dev Zone ·

Free Resource

Like (0)

Comment (2)

Save

{{ articles[0].views | formatCount}} Views

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

This tutorial will walk through out how to add a tooltip to a Grid Header. This feature is not natively supported by Ext JS 4 API. Fortunately, there is a third-party plugin we can use to do it.

To get started, I created a JavaScript project on Eclipse IDE and it looks like this:

Plugin Code

The first thing we have to add (after Ext JS 4 SDK) is the plugin. To do so, I created a folder ux (for plugins) and a folder called grid (inside ux) because it is a plugin for Ext 4 grid. Then I created a file name HeaderToolTip.js with the following content:

   /**
 * @class Ext.ux.grid.HeaderToolTip
 * @namespace ux.grid
 *
 *  Text tooltips should be stored in the grid column definition
 *
 *  Sencha forum url:
 *  http://www.sencha.com/forum/showthread.php?132637-Ext.ux.grid.HeaderToolTip
 */
Ext.define('Ext.ux.grid.HeaderToolTip', {
    alias: 'plugin.headertooltip',
    init : function(grid) {
        var headerCt = grid.headerCt;
        grid.headerCt.on("afterrender", function(g) {
            grid.tip = Ext.create('Ext.tip.ToolTip', {
                target: headerCt.el,
                delegate: ".x-column-header",
                trackMouse: true,
                renderTo: Ext.getBody(),
                listeners: {
                    beforeshow: function(tip) {
                        var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id  +']');
                        if (c  && c.tooltip)
                            tip.update(c.tooltip);
                        else
                            return false;
                    }
                }
            });
        });
    }
});
  

Grid with Header Tooltip

Now we need to build the application code. To test, simply create a data grid:

   Ext.Loader.setConfig({enabled: true});

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.ux.grid.HeaderToolTip'
]);

Ext.onReady(function() {

    var myData = [
        ['3m Co'],
        ['Alcoa Inc'],
        ['Altria Group Inc'],
        ['American Express Company'],
        ['American International Group, Inc.'],
        ['AT&T Inc.'],
        ['Boeing Co.'],
        ['Caterpillar Inc.'],
        ['Citigroup, Inc.'],
        ['E.I. du Pont de Nemours and Company'],
        ['Exxon Mobil Corp'],
        ['General Electric Company']
    ];

    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'}
        ],
        data: myData
    });

    Ext.create('Ext.grid.Panel', {
        store: store,
        plugins: ['headertooltip'],
        columns: [
            {
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company',
                tooltip: 'Some tooltip'
            }
        ],
        height: 200,
        width: 200,
        title: 'Grid with Header Tooltip',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true
        }
    });
});
  

On line 1, we have to enable the Ext.Loader so Ext can dynamic loading the files we need.

On lines 3-7 we declared the components we need to have loaded before loading our application. Note the Ext.ux.grid.HeaderTooltip.js is included as well. This way, Ext JS knows it has to look for a file called HeaderTooltip.js inside the folder ux/grid.

Then on line 35 we have to include the HeaderTooltip plugin as a plugin of the grid we want to display a header tooltip.

And finally, on line 42 we need to declared a column config called tooltip with the header tooltip we want to display.

HTML Page

Then we can create an HTML file we can run on a browser:

   <html>
<head>
    <title>Grid with Header Tooltip</title>

    <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext4/ext-all.js"></script>

    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div id="grid-example" style="padding:20px;"></div>
</body>
</html>
  

And when we execute the application, we will get the following:

And it is done!

Disclaimer: I am not the author of this HeaderTooltip plugin. So if you get any errors, please contact the author of the plugin on Sencha Forum: http://www.sencha.com/forum/showthread.php?132637-Ext.ux.grid.HeaderToolTip. I simply demonstrated how to use the plugin on this tutorial.

I’m using Ext JS 4.0.2a (open source version) on this project.