Extjs create a grid feature or grid plugin that sets a tooltip for each column in the grid

Question

This question has the answer to adding the tooltip: Extjs4 set tooltip on each column hover in gridPanel

I have a follow up question to the most upvoted answer to this question, which is modifying the renderer function to add the tool tip like below:

{
    xtype : 'gridcolumn',
    dataIndex : 'status',
    text : 'Status',
    renderer : function(value, metadata) {
                    metadata.tdAttr = 'data-qtip="' + value + '"';
                    return value;
                }
}

I want to have a grid plugin or feature which sets a custom tooltip using the above implementation.

Question is how can I add my stuff but at the same time not take away a user defined renderer function being used for a particular grid. Essentially I want to add the tooltip feature for all grids, but not take away the ability to specify custom renderers for some columns on some of the grids.

I guess what could be a possible alternative is another less invasive place where I could modify this metadata.tdAttr value. Maybe an event that someone would know about?

Answer 1

In your plugins init method, you will be able to loop through the columns of the grid (the constructor and initComponent methods of the grid will have already been called at this point).

That means that you can inspect each column to see if the user has setup a custom renderer. If there is none, you can put your one, and if there is one, you can chain the existing renderer with yours.

EDIT

Ext.define('My.Plugin', {

    init: function(grid) {

        // You may not need the scope, but if you do, this binding will
        // allow to preserve the scope configured in the column...
        var pluginRenderer = Ext.Function.bind(this.renderer, this);

        Ext.each(grid.query('gridcolumn'), function(col) {
            var renderer = col.renderer;
            col.renderer = renderer
                ? Ext.Function.createSequence(renderer, pluginRenderer)
                : pluginRenderer;
        });
    }

    ,renderer: function(value, md) {

        // ...

        // You must return, in case your renderer is the only one (if
        // there is another one, this return will be ignored by createSequence)
        return value;
    }
});