ExtJS Grid Tooltip的3+1种实现方式总结

• 本文总结了ExtJS Grid Tooltip的几种实现方法。ExtJS Grid Tooltip可以通过表头提示，单元格提示，行提示以及自己手动添加等方式完成。本文参考了官方FAQ上提供的描述。

 

ExtJS Grid Tooltip实现之一：表头提示

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

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

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. //========    
3. renderer = function (data, metadata, record, rowIndex, columnIndex, store) {    
4.     //build the qtip:    
5.     var title = 'Details for ' + value + '-' + record.get('month') +    
6.         '-' + record.get('year');    
7.     var tip = record.get('sunday_events');    
8.      
9.     metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';    
10.      
11.     //return the display text:    
12.     var displayText = '< span style="color: #000;">' + value + '< /span>< br />' +    
13.         record.get('sunday_events_short');    
14.     return displayText;    
15. };    
16.      
17. //option 2    
18. //========    
19. renderer = function (data, metadata, record, rowIndex, columnIndex, store) {    
20.     var qtip = '>';    
21.     if(data >= 0){    
22.         qtip = " qtip='yeah'/>";    
23.         return '< span style="color:green;"' + qtip + data + '%< /span>';    
24.     }else if(data <  0){    
25.         qtip = " qtip='woops'/>";    
26.         return '< span style="color:red;"' + qtip + data + '%< /span>';    
27.     }    
28.     return data;    
29. };    
30.      
31. //option 3    
32. //========    
33. var qtipTpl = new Ext.XTemplate(    
34.     '< h3>Phones:< /h3>',    
35.     '< tpl for=".">',    
36.     '< div>< i>{phoneType}:< /i> {phoneNumber}< /div>',    
37.     '< /tpl>'    
38. );    
39.      
40. renderer = function (data, metadata, record, rowIndex, columnIndex, store) {    
41.      
42.     // get data     
43.     var data = record.data;    
44.      
45.     // convert phones to array (only once)     
46.     data.phones = Ext.isArray(data.phones) ?    
47.         data.phones :     
48.         this.getPhones(data.phones);    
49.      
50.     // create tooltip     
51.     var qtip = qtipTpl.apply(data.phones);    
52.      
53.     metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';    
54.      
55.     //return the display text:    
56.     return data;        
57. };   

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

1. var myGrid = new Ext.grid.gridPanel(gridConfig);    
2. myGrid.on('render', function(grid) {    
3.     var store = grid.getStore();  // Capture the Store.    
4.     
5.     var view = grid.getView();    // Capture the GridView.    
6.     
7.     myGrid.tip = new Ext.ToolTip({    
8.         target: view.mainBody,    // The overall target element.    
9.     
10.         delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.    
11.     
12.         trackMouse: true,         // Moving within the row should not hide the tip.    
13.     
14.         renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.    
15.     
16.         listeners: {              // Change content dynamically depending on which element triggered the show.    
17.     
18.             beforeshow: function updateTipBody(tip) {    
19.                 var rowIndex = view.findRowIndex(tip.triggerElement);    
20.                 tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;    
21.             }    
22.         }    
23.     });    
24. });   

ExtJS Grid Tooltip实现之四：其他方法？

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