ExtJS Grid Tooltip提示 鼠标悬停

本文总结了ExtJS Grid Tooltip的几种实现方法。ExtJS Grid Tooltip可以通过表头提示，单元格提示，行提示以及自己手动添加等方式完成。本文参考了官方FAQ上提供的描述。
ExtJS Grid Tooltip实现之一：表头提示
在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:

var grid = new Ext.grid.GridPanel({

columns:[

{header:'名称',dataIndex:'name',tooltip:'对象名称'},    




{header:'开始时间 - 结束时间 < br/>成功/失败/成功率', dataIndex:'sucRate',tooltip:'成功/失败/成功率'}

]

});

ExtJS Grid Tooltip实现之二：单元格提示
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有更好的方式,如下:
ExtJS Grid Tooltip实现之三：行提示 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);

                if(!Ext.isEmpty(content)){
                    tip.body.dom.innerHTML = "提示信息";
                }else{
                    return false; //停止执行，从而禁止显示Tip
                    tip.destroy();
                }

        }    
    }    
});

});