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

1.表头提示

 

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

Js代码  

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

 

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

代码:

Js代码  

1. //option 1  
2. //========  
3. renderer = function (data, metadata, record, rowIndex, columnIndex, store) {  
4.     //build the qtip:  
5.     var title = 'Details for&nbsp;' + 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有更好的方式,如下:

 

3.行提示 RowTip

 

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

 

代码:

Js代码  

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. });  

 

 

4.其他方法

 

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