Extjs 4 grid mouseover show full cell value

Question

I've got a grid with a long string in one of the columns. I would like the full string to appear when the user mouses over any cell in this column.

So far I have it working where a tooltip pops up for any cell in this column but they don't display the text. The tooltip always just says "Icon Tip".

How do I get the qtip to display the variable val instead of the string "Icon Tip"?

Ext.define('AM.view.user.List' , {
    extend: 'Ext.grid.Panel',
    .......
    initComponent: function() {
        function renderTip(val, meta, rec, rowIndex, colIndex, store) {
            meta.tdAttr = 'data-qtip="Icon Tip"';
            return val;
        };
        this.columns = [
            {header: 'First Name', dataIndex: 'FirstName', width: 75},
            {header: 'Last Name', dataIndex: 'Last', width: 75},
            {header: 'Perm', dataIndex: 'Perm', width: 75},
            {header: 'Comment', dataIndex: 'Comments', width: 150, renderer: renderTip}
        ];
        this.callParent(arguments);
    }
});

score 13 · Accepted Answer · edited Nov 09 '15 at 16:13

13

Figured it out on the sencha forums, the correct code would be:

function renderTip(value, metaData, record, rowIdx, colIdx, store) {
    metaData.tdAttr = 'data-qtip="' + value + '"';
    return value;
};

I guess there was some string/variable concatenation I needed to use

http://www.sencha.com/forum/showthread.php?179016-Grid-cell-tooltip

edited Nov 09 '15 at 16:13

MarthyM

1,839
2
21
23

answered Sep 04 '12 at 23:23

alex9311

1,230
1
18
42

score 1 · Answer 2 · answered Aug 31 '12 at 01:37

1

You already have the value, it gets passed as the first argument to the renderer. If you need more information, you also have the record.

answered Aug 31 '12 at 01:37

Evan Trimboli

29,900
6
45
66

Thank you for answering. What is the difference between the value and the record? I thought replacing meta.tdAttr = 'data-qtip="Icon Tip"'; with meta.tdAttr = 'data-qtip=val'; would display the cell value in the tooltip but it just say "val" for all cells now – alex9311 Aug 31 '12 at 23:12
1

Value is the value bound in the dataIndex, record is the whole model with all the values. Not sure how familiar you are with programming, but val is a variable. So there's a difference between = val and = "val"; – Evan Trimboli Sep 01 '12 at 06:39
Yeah I figured meta.tdAttr = 'data-qtip="Icon Tip"'; would show the string "Icon Tip" in the tooltip, which it did. I thought meta.tdAttr = 'data-qtip=val'; would show the string contained in the variable val in the tooltip but it only shows "val". Thanks for the reply! – alex9311 Sep 04 '12 at 21:42
figured it out from this thread http://www.sencha.com/forum/showthread.php?179016-Grid-cell-tooltip – alex9311 Sep 04 '12 at 23:24

Extjs 4 grid mouseover show full cell value

2 Answers2