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,

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 : function(value, metadata,record) {
                                    return getExpandableImage(value, metadata,record);
                    }
           }]



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