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 · Tutorial

Like (0)

Save

20.11K Views

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.