本文总结了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

1. //option?1?? ?
2. //========?? ?

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

1. ????//build?the?qtip:?? ?
2. ????var?title?=?'Details?for?'?+?value?+?'-'?+?record.get('month')?+?? ?
3. ????????'-'?+?record.get('year');?? ?
4. ????var?tip?=?record.get('sunday_events');?? ?
5. ??? ?
6. ????metadata.attr?=?'ext:qtitle="'?+?title?+?'"'?+?'?ext:qtip="'?+?tip?+?'"';?? ?
7. ??? ?
8. ????//return?the?display?text:?? ?
9. ????var?displayText?=?