ExtJS Grid tooltip的幾種實現方式

1.表頭提示

 在2.2裏面是設置ColumnModel.tooltip ,3.0則是Column. tooltip 如下:
Js代碼
var grid = new Ext.grid.GridPanel({
columns:[
{header:'名稱',dataIndex:'name',tooltip:'對象名稱'},
{header:'開始時間 - 結束時間 <br/>成功/失敗/成功率', dataIndex:'sucRate',tooltip:'成功/失敗/成功率'}
]
});

 

 

2.單元格提示

1)使用Ext.QuickTips

在開始的時候就執行Ext.QuickTips.init();

然後對需要提示的單元格,重寫renderer函數,添加ext:qtitle , ext:qtip這2個屬性即可。

這個在官方的FAQ上有詳細描述: http://extjs.com/learn/Ext_FAQ_Grid#Add_ToolTip_or_Qtip

代碼:
Js代碼
//option 1
//========
renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
//build the qtip:
var title = 'Details for&nbsp;' + 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 = '<span style="color: #000;">' + value + '</span><br />' +
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 '<span style="color:green;"' + qtip + data + '%</span>';
}else if(data < 0){
qtip = " qtip='woops'/>";
return '<span style="color:red;"' + qtip + data + '%</span>';
}
return data;
};

//option 3
//========
var qtipTpl = new Ext.XTemplate(
'<h3>Phones:</h3>',
'<tpl for=".">',
'<div><i>{phoneType}:</i> {phoneNumber}</div>',
'</tpl>'
);

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)使用ToolTip

官方也已經給出方法:

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

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



以上給出的方法是可以讓一個grid裏面的元素共享一個tooltip對象。一般用來做rowtip

不過3.0有更好的方式,如下:



3.行提示 RowTip



ExtJS3.0新增的方法,設置tooltip的delegate



代碼:
Js代碼
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: '.x-grid3-row', // 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.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;
}
}
});
});



4.其他方法



監聽GridView或Store的事件,然後通過rowSelector或getRow方法來遍歷,自己加tooltip... 這個方式請無視吧
分享

轉帖地址：http://blog.sina.com.cn/s/blog_61dfec800100g8v2.html