当前位置: 代码迷 >> JavaScript >> ExtJS Grid Tooltip的3+1类实现方式总结
  详细解决方案

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

热度:108   发布时间:2012-10-07 17:28:51.0
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... 这个方式请无视吧

  相关解决方案