How to add dynamic tooltip on extjs actioncolumn icons?

Question

I have actioncolumn something like this:

{
    xtype: 'actioncolumn',
    align: 'center',
    items: [
        {
            getTip: function () {
                return 'this doesn\'t work';
            },
            handler: function() {
                // action 1
            }
        },{
            tooltip: 'works',
            handler: function() {
                // action 2
            }
        }
    ]
}

getTip() method I found in documentation, but it doesn't work or I don't know how to use it. What I am doing wrong or how can I set tooltip?

score 4 · Accepted Answer · answered Nov 30 '12 at 09:21

Seems like it is bug with getTip() as bjornd said, but I succeeded to add tooltip that's not the best way I think, but it works for me.

{
    xtype: 'actioncolumn',
    align: 'center',
    items: [
        {
            getClass: function(value,meta,record,rowIx,colIx, store) {
                this.items[0].tooltip = 'working ' + record('name');
                return 'some-class-name'; // or something if needed
            },
            handler: function() {
                // action 1
            }
        },{
            tooltip: 'works',
            handler: function() {
                // action 2
            }
        }
    ]
}

If someone can suggest better solution I would be glad to hear.

make sure you don't have a tooltip config on the action column otherwise getTip won't be invoked. In Ext 6 it works as long as there is no tooltip config. — code4jhon, Jun 30 '17 at 18:28

score 2 · Answer 2 · answered Sep 08 '14 at 17:26

2

I have used

getTip : function(value, metaData, record){
    return this.getCheckOutCheckInToolTip(record);
},

it works

answered Sep 08 '14 at 17:26

mrinalnahth

31
1

score 1 · Answer 3 · answered Nov 30 '12 at 08:42

As stated in the comments for the items property:

getTip option doesn't seem working. I've declared a function :

getTip:function( value, metadata, record ) {
    if( !record.get( 'editable' ) )
        return 'Record is locked';
    return 'Delete record';
}

and no tip appears on mouseover. The result code in Firebug is :

<td class=" x-grid-cell x-grid-cell-btn-timesheet-delete   x-action-col-cell x-grid-cell-last"><div style="text-align: left; ;" class="x-grid-cell-inner "><img class="x-action-col-icon x-action-col-0   timesheet-option-icon-delete" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""></div></td>

So, no data-qtip property.

So I think this is a known issue. You can wait for the update or fix it by yourself with some override.

But maybe there is other way to add tooltip. Someone must have been doing this if this method exists. — Vytautas, Nov 30 '12 at 08:53

How to add dynamic tooltip on extjs actioncolumn icons?

3 Answers3