Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add dynamic tooltip on extjs actioncolumn icons?

Tags:

extjs

extjs4.1

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?

like image 823
Vytautas Avatar asked Nov 30 '12 08:11

Vytautas


3 Answers

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.

like image 105
Vytautas Avatar answered Oct 04 '22 20:10

Vytautas


I have used

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

it works

like image 40
mrinalnahth Avatar answered Oct 04 '22 20:10

mrinalnahth


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.

like image 41
bjornd Avatar answered Oct 04 '22 20:10

bjornd