效果图如下
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.