Shulou(Shulou.com)06/02 Report--

This article mainly talks about "what are the ways to implement ExtJS Grid Tooltip". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the ways to implement ExtJS Grid Tooltip?"

One of the ExtJS Grid Tooltip implementations: header hints

ColumnModel.tooltip is set in 2. 2 and Column in 3. 0. Tooltip is as follows:

Var grid = new Ext.grid.GridPanel ({columns: [{header:' name', dataIndex:'name',tooltip:' object name'}, {header:' start time-end time success / failure / success rate', dataIndex:'sucRate',tooltip:' success / failure / success rate'}]})

ExtJS Grid Tooltip implementation II: cell hints

1) use Ext.QuickTips

Execute Ext.QuickTips.init () at the beginning

Then for the cells that need to be prompted, rewrite the renderer function and add the two attributes ext:qtitle and ext:qtip.

This is described in detail on the official FAQ: http://extjs.com/learn/Ext_FAQ_Grid#Add_ToolTip_or_Qtip

/ / option 1 / / = renderer = function (data, metadata, record, rowIndex, columnIndex, store) {/ / build the qtip: var title = 'Details for' + value +'-'+ record.get ('month') +' -'+ record.get ('year'); var tip = record.get (' sunday_events') Metadata.attr = 'ext:qtitle= "' + title +'"'+ 'ext:qtip= "' + tip +'"'; / / return the display text: var displayText =''+ value +''+ record.get ('sunday_events_short'); return displayText;} / / option 2 / / = renderer = function (data, metadata, record, rowIndex, columnIndex, store) {var qtip=' >'; if (data > = 0) {qtip= "qtip='yeah'/ >"; return'

"; return'< span'+ qtip + data +'%';} return data;}; / / option 3 / / = var qtipTpl = new Ext.XTemplate ('Phones:',','{phoneType}: {phoneNumber}','') Renderer = function (data, metadata, record, rowIndex, columnIndex, store) {/ / get data var data = record.data; / / convert phones to array (only once) data.phones = Ext.isArray (data.phones)? Data.phones: this.getPhones (data.phones); / / create tooltip var qtip= qtipTpl.apply (data.phones); metadata.attr = 'ext:qtitle= "' + title +'"'+ 'ext:qtip= "' + tip +'"'; / / return the display text: return data;}

2) use ToolTip

Officials have also come up with a way:

Http://extjs.com/forum/showthread.php?p=112125#post112125

Http://extjs.com/forum/showthread.php?t=55690

The method given above is to make the elements in a grid share a tooltip object. It is usually used to make rowtip.

However, 3.0 has a better way, as follows:

The third part of ExtJS Grid Tooltip implementation: line prompt RowTip

New method added to ExtJS3.0 to set the delegate of tooltip

Var myGrid = new Ext.grid.gridPanel (gridConfig); myGrid.on ('render', function (grid) {var store = grid.getStore (); / / Capture the Store. Var view = grid.getView (); / / Capture the GridView. MyGrid.tip = new Ext.ToolTip ({target: view.mainBody, / / The overall target element. Delegate:'. Xmuri grid3 Murray Rowling, / / Each grid row causes its own seperate show and hide. TrackMouse: true, / / Moving within the row should not hide the tip. RenderTo: document.body, / / Render immediately so that tip.body can be referenced prior to the first show. Listeners: {/ / Change content dynamically depending on which element triggered the show. Beforeshow: function updateTipBody (tip) {var rowIndex = view.findRowIndex (tip.triggerElement); tip.body.do [XSS _ clean] = "Over Record ID" + store.getAt (rowIndex) .id;});}) At this point, I believe you have a deeper understanding of "what are the ways to achieve ExtJS Grid Tooltip?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.