ExtJS - Grid Tool tip for specific columns

Question

I am trying to create a tooltip in my grid for specific columns.

In my grid, i need tooltip for Column 1st nd 3rd. (name and phNo.)

Fiddle - https://fiddle.sencha.com/#view/editor&fiddle/2lop

Sachet Patil Sachet Patil · Accepted Answer · 2018-09-30T14:48:59

I think its quite simple. Just put tooltip in column items wherever you want.

columns: [{
            text: 'Name',
            dataIndex: 'name',
            tooltip: 'Name'
        }, {
            text: 'Email',
            dataIndex: 'email'
        }, {
            text: 'Phone',
            dataIndex: 'phone',
            tooltip: 'Phone'
        }, {
            text: 'Type',
            dataIndex: 'type'
        }],

And if you want tooltip for all column records then follow this code:

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') + '"');
    }
}});

This is available in official extjs docs :Tooltip

ExtJS - Grid Tool tip for specific columns

1 Answers