add tooltip to extjs grid to show complete information about that row

Question

I had a gridview, it attached with a model that have some fields. But in my grid i just show one field, and what i want is when my mouse hover to the grid row, tooltip will appear and show the other fields value.

How can i do this? Anybody ever done this?

What grid event that I should create the tooltip? How can I access my on hover row value and show it on the tooltip? How the nice ways to show the value, can tooltip using item like xpanel or something, or the only way is using html?

Please help me. Thanks in advance :)

Answer 1

Use renderer in grid columns config. write an function which will return the expected value to that renderer function mapping.

Sample working example:

columns: [{
           text     : 'Device Name',
           dataIndex: 'name',
           renderer: getExpandableImage        
         }]



function getExpandableImage(value, metaData,record){
    var deviceDetail = record.get('deviceName') + " " + record.get('description');
    metaData.tdAttr = 'data-qtip="' + deviceDetail + '"';
    return value;
}

This is the place (metaData.tdAttr = 'data-qtip="' + deviceDetail + '"';) where you need to show data in tooltip