Category: Code Examples

Problem
You want to display a grid with a tooltip.

Tested in ExtJS Version
4.1.1

Screenshot

Solution
Set the “tip” property on the GridPanel’s view (panel.getView().tip).

view = this.getView();
view.tip = Ext.create('Ext.tip.ToolTip', {
	target: view.el,
	delegate: view.itemSelector,
	trackMouse: true,
	renderTo: Ext.getBody(),
	listeners: {
     		beforeshow: function updateTipBody(tip) {
     			 tip.update("Tooltip!");
        }
}

Discussion
The example ExtJS provides in their documentation did not work for me. In their example, they run this code in a the render event, which they set after the grid object is created- for whatever reason this only works in afterrender.

You can retrieve the highlighted row inside the beforeshow event using view.getRecord(tip.triggerElement), but it is not clear how to determine which column the tooltip is rendered on.

See the ExtJS GridView example for further discussion.

The full source is below.

Ext.onReady(function() {
var trackStore = new Ext.data.Store({
  storeId: 'soundCloudStore',

    proxy: {
      type: 'ajax',
      url: 'blues.json',
      reader: {
        type: 'json',
        idProperty: 'id'
      }
    },
    fields:['duration', 'genre', 'created_at', 'title', 'id']
});

trackStore.load(
  function() { 
    Ext.create('Ext.grid.Panel', {
      title: 'Tracks',
      store: trackStore,
      stripeRows: false,
      columns: [
        { header: 'Title', dataIndex: 'title' },
        { header: 'Duration',  dataIndex: 'duration' },
        { header: 'Genre', dataIndex: 'genre' },
        { header: 'Created At', dataIndex: 'created_at'}
      ],
      height: 200,
      width: 475,
      renderTo: Ext.getBody(),
      listeners: {
        afterrender: function( eOpts )
        {
          view = this.getView();
          view.tip = Ext.create('Ext.tip.ToolTip', {
            target: view.el,
            delegate: view.itemSelector,
            trackMouse: true,
            renderTo: Ext.getBody(),
            listeners: {
              beforeshow: function updateTipBody(tip) {
              tip.update("Tooltip!");
            }
          }
        });
      }
    }
  });
});
});