Home > JavaScript > Adding QTips to GridPanel cell in ExtJS 4.0

Adding QTips to GridPanel cell in ExtJS 4.0

November 8th, 2014 Leave a comment Go to comments

Need to add a custom tooltip (quick tip) to cell in a GridPanel in ExtJS 4.0? In your column definitions, simply add a attribut “rendered”, passing a custom function.

...
columns [
    ...
    {
      text:"Bookmark", 
      dataIndex:"title", 
      flex:1, 
      renderer:function(value,metaData) 
      {
        metaData.tdAttr = 'data-qtip="' + value + '"';
        return value;
      }
    },
    ...
}
...

A couple notes:

  1. To show tooltip, you need to add line “Ext.QuickTips.init();” before Grid definition
  2. data-qtip is one of four attributes for tooltip. Tooltip attributes are:
    • data-qtip – Set tooltip text content
    • data-qtitle – Set the title
    • data-qwidth – Set tooltip width
    • data-qalign – Represented by a reference point that corresponds to the original, which reference point. For example: “tl-br” is represented by the tip of the upper left corner, corresponding to the lower right corner of the original

With such a modification, you get a nice tooltip generated for each cell in your grid.

Categories: JavaScript Tags: , ,
  1. No comments yet.
  1. No trackbacks yet.