学步园

效果图如下

js代码:

// Create the namespace<br /> Ext.ns('Ext.ux.plugins.grid');</p> <p>/**<br /> * Ext.ux.plugins.grid.CellToolTips plugin for Ext.grid.GridPanel<br /> *<br /> * A GridPanel plugin that enables the creation of record based,<br /> * per-column tooltips that can also be dynamically loaded via Ajax<br /> * calls.<br /> *<br /> * Requires Animal's triggerElement override when using ExtJS 2.x<br /> * (from <a href="http://extjs.com/forum/showthread.php?p=265259#post265259" mce_href="http://extjs.com/forum/showthread.php?p=265259#post265259">http://extjs.com/forum/showthread.php?p=265259#post265259</a>)<br /> * In ExtJS 3.0 this feature is arealy in the standard.<br /> *<br /> * @author BitPoet<br /> * @date July 03, 2009<br /> * @version 1.1<br /> *<br /> * @class Ext.ux.plugins.grid.CellToolTips<br /> * @extends Ext.util.Observable<br /> */</p> <p>/**<br /> * Constructor for the Plugin<br /> *<br /> * @param {ConfigObject} config<br /> * @constructor<br /> */<br /> Ext.ux.plugins.grid.CellToolTips = function(config) {<br /> var cfgTips;<br /> if( Ext.isArray(config) ) {<br /> cfgTips = config;<br /> config = {};<br /> } else {<br /> cfgTips = config.ajaxTips;<br /> }<br /> Ext.ux.plugins.grid.CellToolTips.superclass.constructor.call(this, config);<br /> if( config.tipConfig ) {<br /> this.tipConfig = config.tipConfig;<br /> }<br /> this.ajaxTips = cfgTips;<br /> } // End of constructor</p> <p>// plugin code<br /> Ext.extend( Ext.ux.plugins.grid.CellToolTips, Ext.util.Observable, {<br /> version: 1.1,<br /> /**<br /> * Temp storage from the config object<br /> *<br /> * @private<br /> */<br /> ajaxTips: false,</p> <p> /**<br /> * Tooltip Templates indexed by column id<br /> *<br /> * @private<br /> */<br /> tipTpls: false,</p> <p> /**<br /> * Tooltip data filter function for setting base parameters<br /> *<br /> * @private<br /> */<br /> tipFns: false,</p> <p> /**<br /> * URLs for ajax backend<br /> *<br /> * @private<br /> */<br /> tipUrls: '',</p> <p> /**<br /> * Tooltip configuration items<br /> *<br /> * @private<br /> */<br /> tipConfig: {},</p> <p> /**<br /> * Loading action<br /> *<br /> * @private<br /> */<br /> request: false,</p> <p> /**<br /> * Plugin initialization routine<br /> *<br /> * @param {Ext.grid.GridPanel} grid<br /> */<br /> init: function(grid) {<br /> if( ! this.ajaxTips ) {<br /> return;<br /> }<br /> this.tipTpls = {};<br /> this.tipFns = {};<br /> this.tipUrls = {};<br /> // Generate tooltip templates<br /> Ext.each( this.ajaxTips, function(tip) {<br /> this.tipTpls[tip.field] = new Ext.XTemplate( tip.tpl );<br /> if( tip.url ) {<br /> this.tipUrls[tip.field] = tip.url;<br /> if( tip.fn )<br /> this.tipFns[tip.field] = tip.fn;<br /> }<br /> }, this);<br /> // delete now superfluous config entry for ajaxTips<br /> delete( this.ajaxTips );<br /> grid.on( 'render', this.onGridRender.createDelegate(this) );<br /> } // End of function init</p> <p> /**<br /> * Set/Add a template for a column<br /> *<br /> * @param {String} fld<br /> * @param {String | Ext.XTemplate} tpl<br /> */<br /> ,setFieldTpl: function(fld, tpl) {<br /> this.tipTpls[fld] = Ext.isObject(tpl) ? tpl : new Ext.XTemplate(tpl);<br /> } // End of function setFieldTpl</p> <p> /**<br /> * Set up the tooltip when the grid is rendered<br /> *<br /> * @private<br /> * @param {Ext.grid.GridPanel} grid<br /> */<br /> ,onGridRender: function(grid)<br /> {<br /> if( ! this.tipTpls ) {<br /> return;<br /> }<br /> // Create one new tooltip for the whole grid<br /> Ext.apply(this.tipConfig, {<br /> target: grid.getView().mainBody,<br /> delegate: '.x-grid3-cell-inner',<br /> trackMouse: true,<br /> renderTo: document.body,<br /> finished: false<br /> });<br /> this.tip = new Ext.ToolTip( this.tipConfig );<br /> this.tip.ctt = this;<br /> // Hook onto the beforeshow event to update the tooltip content<br /> this.tip.on('beforeshow', this.beforeTipShow.createDelegate(this.tip, [this, grid], true));<br /> this.tip.on('hide', this.hideTip);<br /> } // End of function onGridRender</p> <p> /**<br /> * Replace the tooltip body by applying current row data to the template<br /> *<br /> * @private<br /> * @param {Ext.ToolTip} tip<br /> * @param {Ext.ux.plugins.grid.CellToolTips} ctt<br /> * @param {Ext.grid.GridPanel} grid<br /> */<br /> ,beforeTipShow: function(tip, ctt, grid) {<br /> // Get column id and check if a tip is defined for it<br /> var colIdx = grid.getView().findCellIndex( tip.triggerElement );<br /> var tipId = grid.getColumnModel().getDataIndex( colIdx );<br /> if( ! ctt.tipTpls[tipId] )<br /> return false;<br /> if( ! tip.finished ) {<br /> var isAjaxTip = (typeof ctt.tipUrls[tipId] == 'string');<br /> // Fetch the row's record from the store and apply the template<br /> var cellRec = grid.getStore().getAt( grid.getView().findRowIndex( tip.triggerElement ) );<br /> // create a copy of the record and use its data, otherwise we might<br /> // accidentially modify the original record's values<br /> var data = cellRec.copy().data;<br /> if( isAjaxTip ) {<br /> ctt.loadDetails((ctt.tipFns[tipId]) ? ctt.tipFns[tipId](data) : data, tip, grid, ctt, tipId);<br /> return false;<br /> } else {<br /> tip.body.dom.innerHTML = ctt.tipTpls[tipId].apply( cellRec.data );<br /> }<br /> } else {<br /> tip.body.dom.innerHTML = tip.ctt.tipTpls[tipId].apply( tip.tipdata );<br /> }<br /> } // End of function beforeTipShow</p> <p> /**<br /> * Fired when the tooltip is hidden, resets the finished handler.<br /> *<br /> * @private<br /> * @param {Ext.ToolTip} tip<br /> */<br /> ,hideTip: function(tip) {<br /> tip.finished = false;<br /> }</p> <p> /**<br /> * Loads the data to apply to the tip template via Ajax<br /> *<br /> * @private<br /> * @param {object} data Parameters for the Ajax request<br /> * @param {Ext.ToolTip} tip The tooltip object<br /> * @param {Ext.grid.GridPanel} grid The grid<br /> * @param {Ext.ux.plugins.grid.CellToolTips} ctt The CellToolTips object<br /> * @param {String} tipid Id of the tooltip (= field name)<br /> */<br /> ,loadDetails: function(data, tip, grid, ctt, tipid) {<br /> Ext.Ajax.request({<br /> url: ctt.tipUrls[tipid],<br /> params: data,<br /> method: 'POST',<br /> success: function(resp, opt) {<br /> tip.finished = true;<br /> tip.tipdata = Ext.decode(resp.responseText);<br /> tip.show();<br /> }<br /> });<br /> }</p> <p>}); // End of extend

//当鼠标滑到项目名称,计划字段的时候(LogText),显示任务内容的详细信息<br /> /*</p> <p>http://www.sencha.com/forum/showthread.php?59895-Ext.ux.plugins.grid.CellToolTips&highlight=Extjs+grid+Tip</p> <p> */<br /> var cellTips = new Ext.ux.plugins.grid.CellToolTips<br /> (<br /> [<br /> { field: 'ProjectName', tpl: '<b>项目名称</b>:{ProjectName}<br/>责任人:{LiabilityMan}<br/>计划完成时间:{LogDate}<br/>任务内容: {Remark}' },<br /> { field: 'LogText', tpl: '<b>项目名称</b>:{ProjectName}<br/>责任人:{LiabilityMan}<br/>计划完成时间:{LogDate}<br/>任务内容: {Remark}' }<br /> ]<br /> ); </p> <p>

Grid中添加插件

var grid = new Ext.grid.GridPanel<br /> ({<br /> id: "MenuGridPanel",<br /> title: '任务列表',<br /> renderTo:"d",<br /> layout: "fit",<br /> width: "100%",<br /> autoHeight: true,<br /> frame: true,<br /> border: true,<br /> columnLines: true,<br /> autoScroll: true,<br /> loadMask: {msg:'正在加载数据，请稍侯……'},<br /> store: store,<br /> sm: sm,<br /> cm: cm,<br /> plugins: [ cellTips ]//这是这个代码<br /> ...<br /> })