Extjs 给 Grid 加上tooltip的几种实现方式

1.表头提示

 

在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:

 var grid = new Ext.grid.GridPanel({
   columns:[
     {header:'名称',dataIndex:'name',tooltip:'对象名称'},
     {header:'开始时间 - 结束时间 <br/>成功/失败/成功率', dataIndex:'sucRate',tooltip:'成功/失败/成功率'}
   ]
 });

 

2.单元格提示

 

1)使用Ext.QuickTips

在开始的时候就执行Ext.QuickTips.init();

然后对需要提示的单元格,重写renderer函数,添加ext:qtitle , ext:qtip这2个属性即可。

这个在官方的FAQ上有详细描述: http://extjs.com/learn/Ext_FAQ_Grid#Add_ToolTip_or_Qtip

代码:

 //option 1
 //========
 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
     //build the qtip:
     var title = 'Details for ' + value + '-' + record.get('month') +
         '-' + record.get('year');
     var tip = record.get('sunday_events');

     metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';

     //return the display text:
     var displayText = '<span style="color: #000;">' + value + '</span><br />' +
         record.get('sunday_events_short');
     return displayText;
 };

 //option 2
 //========
 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
     var qtip = '>';
     if(data >= 0){
         qtip = " qtip='yeah'/>";
         return '<span style="color:green;"' + qtip + data + '%</span>';
     }else if(data < 0){
         qtip = " qtip='woops'/>";
         return '<span style="color:red;"' + qtip + data + '%</span>';
     }
     return data;
 };

 //option 3
 //========
 var qtipTpl = new Ext.XTemplate(
     '<h3>Phones:</h3>',
     '<tpl for=".">',
     '<div><i>{phoneType}:</i> {phoneNumber}</div>',
     '</tpl>'
 );

 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {

     // get data
     var data = record.data;

     // convert phones to array (only once)
     data.phones = Ext.isArray(data.phones) ?
         data.phones :
         this.getPhones(data.phones);

     // create tooltip
     var qtip = qtipTpl.apply(data.phones);

     metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';

     //return the display text:
     return data;
 };

 

 

2)使用ToolTip

官方也已经给出方法:

http://extjs.com/forum/showthread.php?p=112125#post112125

http://extjs.com/forum/showthread.php?t=55690

 

以上给出的方法是可以让一个grid里面的元素共享一个tooltip对象。一般用来做rowtip

不过3.0有更好的方式,如下:

 

3.行提示 RowTip

 

ExtJS3.0新增的方法,设置tooltip的delegate

 

代码:

 var myGrid = new Ext.grid.gridPanel(gridConfig);
 myGrid.on('render', function(grid) {
     var store = grid.getStore();  // Capture the Store.

     var view = grid.getView();    // Capture the GridView.

     myGrid.tip = new Ext.ToolTip({
         target: view.mainBody,    // The overall target element.

         delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.

         trackMouse: true,         // Moving within the row should not hide the tip.

         renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.

         listeners: {              // Change content dynamically depending on which element triggered the show.

             beforeshow: function updateTipBody(tip) {
                 var rowIndex = view.findRowIndex(tip.triggerElement);
                 tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;
             }
         }
     });
 });

 

 

4.其他方法

 

监听GridView或Store的事件,然后通过rowSelector或getRow方法来遍历,自己加tooltip... 这个方式请无视吧