http://atian25.javaeye.com/blog/417361
1.表頭提示
在2.2里面是設置ColumnModel.tooltip
,3.0則是Column.
tooltip
如下:
1 var grid = new Ext.grid.GridPanel({
2 columns:[
3 {header:'名稱',dataIndex:'name',tooltip:'對象名稱'},
4 {header:'開始時間 - 結束時間 <br/>成功/失敗/成功率', dataIndex:'sucRate',tooltip:'成功/失敗/成功率'}
5 ]
6 });
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
代碼:
1 //option 1
2 //========
3 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
4 //build the qtip:
5 var title = 'Details for ' + value + '-' + record.get('month') +
6 '-' + record.get('year');
7 var tip = record.get('sunday_events');
8
9 metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';
10
11 //return the display text:
12 var displayText = '<span style="color: #000;">' + value + '</span><br />' +
13 record.get('sunday_events_short');
14 return displayText;
15 };
16
17 //option 2
18 //========
19 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
20 var qtip = '>';
21 if(data >= 0){
22 qtip = " qtip='yeah'/>";
23 return '<span style="color:green;"' + qtip + data + '%</span>';
24 }else if(data < 0){
25 qtip = " qtip='woops'/>";
26 return '<span style="color:red;"' + qtip + data + '%</span>';
27 }
28 return data;
29 };
30
31 //option 3
32 //========
33 var qtipTpl = new Ext.XTemplate(
34 '<h3>Phones:</h3>',
35 '<tpl for=".">',
36 '<div><i>{phoneType}:</i> {phoneNumber}</div>',
37 '</tpl>'
38 );
39
40 renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
41
42 // get data
43 var data = record.data;
44
45 // convert phones to array (only once)
46 data.phones = Ext.isArray(data.phones) ?
47 data.phones :
48 this.getPhones(data.phones);
49
50 // create tooltip
51 var qtip = qtipTpl.apply(data.phones);
52
53 metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';
54
55 //return the display text:
56 return data;
57 };
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
代碼:
1 var myGrid = new Ext.grid.gridPanel(gridConfig);
2 myGrid.on('render', function(grid) {
3 var store = grid.getStore(); // Capture the Store.
4
5 var view = grid.getView(); // Capture the GridView.
6
7 myGrid.tip = new Ext.ToolTip({
8 target: view.mainBody, // The overall target element.
9
10 delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
11
12 trackMouse: true, // Moving within the row should not hide the tip.
13
14 renderTo: document.body, // Render immediately so that tip.body can be referenced prior to the first show.
15
16 listeners: { // Change content dynamically depending on which element triggered the show.
17
18 beforeshow: function updateTipBody(tip) {
19 var rowIndex = view.findRowIndex(tip.triggerElement);
20 tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;
21 }
22 }
23 });
24 });
4.其他方法
監聽GridView或Store的事件,然后通過rowSelector或getRow方法來遍歷,自己加tooltip... 這個方式請無視吧