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... 这个方式请无视吧