ToolTip in Grid cell - ExtJs 6

Question

I am using below code to display Tool Tip for Grid cell In ExtJS 6

{
header: 'Name', 
cls: 'nameCls',
locked: true,
tdCls: 'nameTdCls',
dataIndex: 'name',
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
    metaData.tdAttr = 'data-qtip= "' + value + '" data-qclass="tipCls" data-qwidth=200';
    return value;
}}

When i run the application it doesnt show the tooltip and display below error message.

Any idea guys??

Thanks in advance guys.

Regards, Mahendra

It seems the tooltip class is missing. Have you called Ext.QuickTips.init();? — Tyr
– Tyr, Commented Sep 10, 2016 at 18:40
@Tyr No i havent call Ext.QuickTips.init(); where should i call this method? — Mahendra Athneria
– Mahendra Athneria, Commented Sep 11, 2016 at 11:26
Hi @Vinod Gubala.. I tried the same but still getting the same error. — Mahendra Athneria
– Mahendra Athneria, Commented Sep 12, 2016 at 11:35

Robert K. · Accepted Answer · 2016-09-13 09:24:17Z

10

Have you tried creating an Ext.tip.ToolTip? You can create a single one to serve as tooltip for each name cell (using delegate) and update it with the value of that cell. Set up a grid render listener to create the tooltip like this:

render: function(grid) {
  var view = grid.getView();

  grid.tip = Ext.create('Ext.tip.ToolTip', {
    target: view.getId(),
    delegate: view.itemSelector + ' .nameTdCls',
    trackMouse: true,
    listeners: {
      beforeshow: function updateTipBody(tip) {
        var tipGridView = tip.target.component;
        var record = tipGridView.getRecord(tip.triggerElement);

        tip.update(record.get('name'));
      }
    }
  });
}

For a working example, see this Fiddle.

answered Sep 13, 2016 at 9:24

Robert K.

5264 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mahendra Athneria Over a year ago

Thanks for your reply. I forget to mention one point that i am using locked grid. In my grid initial 3 columns are locked & remaning are unlocked. For locked columns i have used "locked: true" property. When i put the same in your example it stops working. Any idea why it is not working when i add one column as locked.

Robert K. Over a year ago

Check the updated Fiddle. A grid behaves differently when using enableLocking. The API docs for enableLocking say this: "A locking grid is processed in a special way. <snip> This Panel becomes merely a container which arranges both in an HBox layout.". I've changed the example a bit, mostly by moving the render listener to lockedViewConfig. Take a look.

helloworld1970 · Accepted Answer · 2017-03-10 08:30:52Z

Thanks for Robert Klein Kromhof!

grid columns:

columns: [{..., tdCls: 'tip'}]

grid listeners:

render: function (grid) {
                var view = grid.getView();
                grid.tip = Ext.create('Ext.tip.ToolTip', {
                    target: view.getId(),
                    delegate: view.itemSelector + ' .tip',
                    trackMouse: true,
                    listeners: {
                        beforeshow: function (tip) {
                            var tipGridView = tip.target.component;
                            var record = tipGridView.getRecord(tip.triggerElement);
                            var colname = tipGridView.getHeaderCt().getHeaderAtIndex(tip.triggerElement.cellIndex).dataIndex;
                            tip.update(record.get(colname));
                        }
                    }
                });
            },
            destroy: function (view) {
                delete view.tip;
            }

M.A.K. Ripon · Accepted Answer · 2019-11-06 14:10:00Z

Create independent function and call when you need.

var grid = Ext.getCmp('your_grid_id');   // Enter your grid id
initToolTip(grid); // call function

initToolTip: function(grid) {
    var view = grid.view;

    // record the current cellIndex
    grid.mon(view, {
        uievent: function(type, view, cell, recordIndex, cellIndex, e) {
            grid.cellIndex = cellIndex;
            grid.recordIndex = recordIndex;
        }
    });

    grid.tip = Ext.create('Ext.tip.ToolTip', {
        target: view.el,
        delegate: '.x-grid-cell',
        trackMouse: true,
        renderTo: Ext.getBody(),
        listeners: {
            beforeshow: function updateTipBody(tip) {
                if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
                    header = grid.headerCt.getGridColumns()[grid.cellIndex];
                    columnText = grid.getStore().getAt(grid.recordIndex).get(header.dataIndex);

                    tip.update(columnText);
                }
            }
        }
    });
}

Collectives™ on Stack Overflow

ToolTip in Grid cell - ExtJs 6

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related