Extjs Grid 中的 ToolTip效果

效果图如下

js代码:

[javascript] view plaincopy

1. // Create the namespace 2. Ext.ns('Ext.ux.plugins.grid'); 3. 4. /**

5. * Ext.ux.plugins.grid.CellToolTips plugin for Ext.grid.GridPanel 6. *

7. * A GridPanel plugin that enables the creation of record based, 8. * per-column tooltips that can also be dynamically loaded via Ajax 9. * calls. 10. *

11. * Requires Animal's triggerElement override when using ExtJS 2.x

12. * (from

mce_href=\/extjs.com/forum/showthread.php?p=265259#post265259) 13. * In ExtJS 3.0 this feature is arealy in the standard. 14. *

15. * @author BitPoet 16. * @date July 03, 2009 17. * @version 1.1 18. *

19. * @class Ext.ux.plugins.grid.CellToolTips 20. * @extends Ext.util.Observable 21. */ 22. 23. /**

24. * Constructor for the Plugin 25. *

26. * @param {ConfigObject} config

27. * @constructor 28. */

29. Ext.ux.plugins.grid.CellToolTips = function(config) { 30. var cfgTips;

31. if( Ext.isArray(config) ) { 32. cfgTips = config; 33. config = {}; 34. } else {

35. cfgTips = config.ajaxTips; 36. }

37. Ext.ux.plugins.grid.CellToolTips.superclass.constructor.call(this, confi

g);

38. if( config.tipConfig ) {

39. this.tipConfig = config.tipConfig; 40. }

41. this.ajaxTips = cfgTips; 42. } // End of constructor 43.

44. // plugin code

45. Ext.extend( Ext.ux.plugins.grid.CellToolTips, Ext.util.Observable, { 46. version: 1.1, 47. /**

48. * Temp storage from the config object 49. *

50. * @private 51. */

52. ajaxTips: false, 53. 54. /**

55. * Tooltip Templates indexed by column id 56. *

57. * @private 58. */

59. tipTpls: false, 60. 61. /**

62. * Tooltip data filter function for setting base parameters 63. *

64. * @private 65. */

66. tipFns: false, 67. 68. /**

69. * URLs for ajax backend

70. *

71. * @private 72. */

73. tipUrls: '', 74. 75. /**

76. * Tooltip configuration items 77. *

78. * @private 79. */

80. tipConfig: {}, 81. 82. /**

83. * Loading action 84. *

85. * @private 86. */

87. request: false, 88. 89. /**

90. * Plugin initialization routine 91. *

92. * @param {Ext.grid.GridPanel} grid 93. */

94. init: function(grid) { 95. if( ! this.ajaxTips ) { 96. return; 97. }

98. this.tipTpls = {}; 99. this.tipFns = {}; 100. this.tipUrls = {};

101. // Generate tooltip templates

102. Ext.each( this.ajaxTips, function(tip) {

103. this.tipTpls[tip.field] = new Ext.XTemplate( tip.tpl ); 104. if( tip.url ) {

105. this.tipUrls[tip.field] = tip.url; 106. if( tip.fn )

107. this.tipFns[tip.field] = tip.fn; 108. } 109. }, this);

110. // delete now superfluous config entry for ajaxTips 111. delete( this.ajaxTips );

112. grid.on( 'render', this.onGridRender.createDelegate(this) ); 113. } // End of function init

114. 115. /**

116. * Set/Add a template for a column 117. *

118. * @param {String} fld

119. * @param {String | Ext.XTemplate} tpl 120. */

121. ,setFieldTpl: function(fld, tpl) {

122. this.tipTpls[fld] = Ext.isObject(tpl) ? tpl : new Ext.XTemplate(tpl

);

123. } // End of function setFieldTpl 124. 125. /**

126. * Set up the tooltip when the grid is rendered 127. *

128. * @private

129. * @param {Ext.grid.GridPanel} grid 130. */

131. ,onGridRender: function(grid) 132. {

133. if( ! this.tipTpls ) { 134. return; 135. }

136. // Create one new tooltip for the whole grid 137. Ext.apply(this.tipConfig, {

138. target: grid.getView().mainBody, 139. delegate: '.x-grid3-cell-inner', 140. trackMouse: true,

141. renderTo: document.body, 142. finished: false 143. });

144. this.tip = new Ext.ToolTip( this.tipConfig ); 145. this.tip.ctt = this;

146. // Hook onto the beforeshow event to update the tooltip content 147. this.tip.on('beforeshow', this.beforeTipShow.createDelegate(this.ti

p, [this, grid], true));

148. this.tip.on('hide', this.hideTip); 149. } // End of function onGridRender 150. 151. /**

152. * Replace the tooltip body by applying current row data to the templat

e 153. *

154. * @private

155. * @param {Ext.ToolTip} tip

156. * @param {Ext.ux.plugins.grid.CellToolTips} ctt 157. * @param {Ext.grid.GridPanel} grid 158. */

159. ,beforeTipShow: function(tip, ctt, grid) {

160. // Get column id and check if a tip is defined for it

161. var colIdx = grid.getView().findCellIndex( tip.triggerElement ); 162. var tipId = grid.getColumnModel().getDataIndex( colIdx ); 163. if( ! ctt.tipTpls[tipId] ) 164. return false; 165. if( ! tip.finished ) {

166. var isAjaxTip = (typeof ctt.tipUrls[tipId] == 'string'); 167. // Fetch the row's record from the store and apply the template

168. var cellRec = grid.getStore().getAt( grid.getView().findRowInde

x( tip.triggerElement ) );

169. // create a copy of the record and use its data, otherwise we m

ight

170. // accidentially modify the original record's values 171. var data = cellRec.copy().data; 172. if( isAjaxTip ) {

173. ctt.loadDetails((ctt.tipFns[tipId]) ? ctt.tipFns[tipId](dat

a) : data, tip, grid, ctt, tipId); 174. return false; 175. } else {

176. tip.body.dom.innerHTML = ctt.tipTpls[tipId].apply( cellRec.data

);

177. } 178. } else {

179. tip.body.dom.innerHTML = tip.ctt.tipTpls[tipId].apply( tip.tipd

ata ); 180. }

181. } // End of function beforeTipShow 182. 183. /**

184. * Fired when the tooltip is hidden, resets the finished handler. 185. *

186. * @private

187. * @param {Ext.ToolTip} tip 188. */

189. ,hideTip: function(tip) { 190. tip.finished = false; 191. } 192.

193. /**

194. * Loads the data to apply to the tip template via Ajax 195. *

196. * @private

197. * @param {object} data Parameters for the Ajax request 198. * @param {Ext.ToolTip} tip The tooltip object 199. * @param {Ext.grid.GridPanel} grid The grid

200. * @param {Ext.ux.plugins.grid.CellToolTips} ctt The CellToolTips objec

t

201. * @param {String} tipid Id of the tooltip (= field name) 202. */

203. ,loadDetails: function(data, tip, grid, ctt, tipid) { 204. Ext.Ajax.request({

205. url: ctt.tipUrls[tipid], 206. params: data, 207. method: 'POST',

208. success: function(resp, opt) { 209. tip.finished = true;

210. tip.tipdata = Ext.decode(resp.responseText); 211. tip.show(); 212. } 213. }); 214. } 215.

216. }); // End of extend

[javascript] view plaincopy

1. //当鼠标滑到项目名称,计划字段的时候(LogText),显示任务内容的详细信息 2. /*

3. http://www.sencha.com/forum/showthread.php?59895-Ext.ux.plugins.grid.CellTo

olTips&highlight=Extjs+grid+Tip 4. */

5. var cellTips = new Ext.ux.plugins.grid.CellToolTips 6. ( 7. [

8. { field: 'ProjectName', tpl: '项目名称:{ProjectName}
责任

人:{LiabilityMan}
计划完成时间:{LogDate}
任务内容: {Remark}' }, 9. { field: 'LogText', tpl: '项目名称:{ProjectName}
责任

人:{LiabilityMan}
计划完成时间:{LogDate}
任务内容: {Remark}' } 10. ] 11. );

Grid中添加插件

[javascript] view plaincopy

1. var grid = new Ext.grid.GridPanel 2. ({

3. id: \, 4. title: '任务列表', 5. renderTo:\, 6. layout: \, 7. width: \, 8. autoHeight: true, 9. frame: true, 10. border: true, 11. columnLines: true, 12. autoScroll: true,

13. loadMask: {msg:'正在加载数据，请稍侯……'}, 14. store: store, 15. sm: sm, 16. cm: cm,

17. plugins: [ cellTips ]//这是这个代码 18. ... 19. })

本文来源：https://www.bwwdw.com/article/r023.html