Is there a way to customize the tooltip in the Ext.grid.column.action?

Question

Is there a way to customize the tooltip in the Ext.grid.column.Action? I'd like to set the autoHide to false.

Thanks in Advance

Answer 1

You can by overriding or extending the ActionColumn.

You can see from the QuickTipManager docs that if you set a data item, data-hide="user" is the equivelent of autoHide=false.

The ActionColumn doesn't expose that functionality, it just uses the defaults, so we have to override the ActionColumns's defaultRenderer.

The defaultRenderer is a protected template function, so we can provide our own renderer and a custom config.

Start by copying the existing defaultRenderer source from the ActionColumn and then adding a few lines to handle our new config.

We can add a custom tooltipAutoHide config to the action config. Then in the defaultRenderer, we can read that config, defaulting to true, and render out data-hide="user" if tooltipAutoHide:false is set.

Here is an example. The relevant lines are

Read the config

//Get custom 'tooltipAutoHide' config from tip
                tooltipAutoHide = item.tooltipAutoHide === false ? false : true;

Render out 'data-hide="user"' if false

// write data-hide=user == autoHide:false 
                    (!tooltipAutoHide ? ' data-hide="user"' : '') +

In column definition, set tooltipAutoHide:true

{
  xtype:'myactioncolumn',
enter code here  items:[{
   tooltip: 'Edit',
   tooltipAutoHide: false
  }]
}

Here is the full sample

        Ext.define('Ext.ux.column.MyActionColumn', {
        extend: 'Ext.grid.column.Action',
        
        xtype: 'myactioncolumn',

        defaultRenderer: function (v, cellValues, record, rowIdx, colIdx, store, view) {
            var me = this,
                scope = me.origScope || me,
                items = me.items,
                len = items.length,
                i, item, ret, disabled, tooltip, altText, icon, glyph, tabIndex, ariaRole;

            // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
            // Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning
            // we will pass an incorrect value to getClass/getTip
            ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';

            cellValues.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
            for (i = 0; i < len; i++) {
                item = items[i];
                icon = item.icon;
                glyph = item.glyph;

                disabled = item.disabled || (item.isDisabled ? Ext.callback(item.isDisabled, item.scope || me.origScope, [view, rowIdx, colIdx, item, record], 0, me) : false);
                tooltip = item.tooltip || (item.getTip ? Ext.callback(item.getTip, item.scope || me.origScope, arguments, 0, me) : null);
                // 
                //Get custom 'tooltipAutoHide' config from tip
                tooltipAutoHide = item.tooltipAutoHide === false ? false : true;
                console.log(tooltipAutoHide);
                altText = item.getAltText ? Ext.callback(item.getAltText, item.scope || me.origScope, arguments, 0, me) : item.altText || me.altText;

                // Only process the item action setup once.
                if (!item.hasActionConfiguration) {
                    // Apply our documented default to all items
                    item.stopSelection = me.stopSelection;
                    item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
                    item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
                    item.hasActionConfiguration = true;
                }

                // If the ActionItem is using a glyph, convert it to an Ext.Glyph instance so we can extract the data easily.
                if (glyph) {
                    glyph = Ext.Glyph.fly(glyph);
                }

                // Pull in tabIndex and ariarRols from item, unless the item is this, in which case
                // that would be wrong, and the icon would get column header values.
                tabIndex = (item !== me && item.tabIndex !== undefined) ? item.tabIndex : me.itemTabIndex;
                ariaRole = (item !== me && item.ariaRole !== undefined) ? item.ariaRole : me.itemAriaRole;

                ret += '<' + (icon ? 'img' : 'div') +
                    (typeof tabIndex === 'number' ? ' tabIndex="' + tabIndex + '"' : '') +
                    (ariaRole ? ' role="' + ariaRole + '"' : ' role="presentation"') +
                    (icon ? (' alt="' + altText + '" src="' + item.icon + '"') : '') +
                    ' class="' + me.actionIconCls + ' ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' +
                    (disabled ? me.disabledCls + ' ' : ' ') +
                    (item.hidden ? Ext.baseCSSPrefix + 'hidden-display ' : '') +
                    (item.getClass ? Ext.callback(item.getClass, item.scope || me.origScope, arguments, undefined, me) : (item.iconCls || me.iconCls || '')) + '"' +
                    (tooltip ? ' data-qtip="' + tooltip + '"' : '') + 
                    // write data-hide=user == autoHide:false 
                    (!tooltipAutoHide ? ' data-hide="user"' : '') +
                    (icon ? '/>' : glyph ? (' style="font-family:' + glyph.fontFamily + '">' + glyph.character + '</div>') : '></div>');
            }

            return ret;
        }
    });

Ext.create('Ext.grid.Panel', {
        title: 'Action Column Demo',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        columns: [{
            text: 'First Name',
            dataIndex: 'firstname'
        }, {
            text: 'Last Name',
            dataIndex: 'lastname'
        }, {
            xtype: 'myactioncolumn',
            width: 50,
            items: [{
                iconCls: 'x-fa fa-cog',
                tooltip: 'Edit',
                tooltipAutoHide: false,
                handler: function (grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("Edit " + rec.get('firstname'));
                }
            }]
        }],
        width: 250,
        renderTo: Ext.getBody()
    });

Here's a working Sencha Fiddle example.