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

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

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. ?? ?

????var?view?=?grid.getView();????//?Capture?the?GridView.?? ?

1. ?? ?
2. ????myGrid.tip?=?new?Ext.ToolTip({?? ?
3. ????????target:?view.mainBody,????//?The?overall?target?element.?? ?
4. ?? ?
5. ????????delegate:?'.x-grid3-row',?//?Each?grid?row?causes?its?own?seperate?show?and?hide.?? ?
6. ?? ?
7. ????????trackMouse:?true,?????????//?Moving?within?the?row?should?not?hide?the?tip.?? ?
8. ?? ?
9. ????????renderTo:?document.body,??//?Render?immediately?so?that?tip.body?can?be?referenced?prior?to?the?first?show.?? ?
10. ?? ?
11. ????????listeners:?{??????????????//?Change?content?dynamically?depending?on?which?element?triggered?the?show.?? ?
12. ?? ?
13. ????????????beforeshow:?function?updateTipBody(tip)?{?? ?
14. ?????????????????? var rowIndex = view.findRowIndex(tip.triggerElement);
    ?
    ??????????????????? if(!Ext.isEmpty(content)){
    ?? ??????????????? ??? ?tip.body.dom.innerHTML = "提示信息";
    ?? ???????????????? }else{
    ?? ??????????????? ??? ?return false; //停止执行，从而禁止显示Tip
    ?? ??????????????? ??? ?tip.destroy();
    ?? ???????????????? }
    
    
15. ????????????}?? ?
16. ????????}?? ?
17. ????});?? ?
18. });???