add tooltip to extjs grid to show complete informa

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 : 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

Answer 2

I used in renderer:

function(value,metadata,record){
    metadata.attr = 'ext:qtip="' + val + '"';
}

Answer 3

you can use below example from sencha documents

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tip.ToolTip

var store = Ext.create('Ext.data.ArrayStore', {
    fields: ['company', 'price', 'change'],
    data: [
        ['3m Co',                               71.72, 0.02],
        ['Alcoa Inc',                           29.01, 0.42],
        ['Altria Group Inc',                    83.81, 0.28],
        ['American Express Company',            52.55, 0.01],
        ['American International Group, Inc.',  64.13, 0.31],
        ['AT&T Inc.',                           31.61, -0.48]
    ]
});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Array Grid',
    store: store,
    columns: [
        {text: 'Company', flex: 1, dataIndex: 'company'},
        {text: 'Price', width: 75, dataIndex: 'price'},
        {text: 'Change', width: 75, dataIndex: 'change'}
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

var view = grid.getView();
var tip = Ext.create('Ext.tip.ToolTip', {
    // The overall target element.
    target: view.el,
    // Each grid row causes its own separate show and hide.
    delegate: view.itemSelector,
    // Moving within the row should not hide the tip.
    trackMouse: true,
    // Render immediately so that tip.body can be referenced prior to the first show.
    renderTo: Ext.getBody(),
    listeners: {
        // Change content dynamically depending on which element triggered the show.
        beforeshow: function updateTipBody(tip) {
            tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"');
        }
    }
});

Answer 4

Use your columns renderer function as follows:

{
                id       :'data',
                header   : 'Data', 
                width    : 160, 
                sortable : true, 
                dataIndex: 'data',
                renderer : function(value, metadata,record) {
                    return setTooltip(value, metadata,record);
                }
            }


    function setTooltip(value, metaData, record){
        var deviceDetail = record.get('data') + ": " + record.get('description');
        metaData.attr='ext:qtip="' + deviceDetail + '"';
        console.log("deviceDetail: " + deviceDetail);
        return value;
    }

Answer 5

The simplest way:

When you declare the column use the property attribute:

{ 
  field: "nameField",
  width: "150px",
  title: "My Field",
  attributes: { title: "#=data.nameField#" }
}