ExtJS Grid Tooltip實現之一：表頭提示

在2.2里面是設置ColumnModel.tooltip ,3.0則是Column. tooltip 如下:

var grid = new Ext.grid.GridPanel({    
  columns:[    
    {header:'名稱',dataIndex:'name',tooltip:'對象名稱'},    
    {header:'開始時間 - 結束時間 < br/>成功/失敗/成功率', dataIndex:'sucRate',tooltip:'成功/失敗/成功率'}    
  ]    
});  

ExtJS Grid Tooltip實現之二：單元格提示

1)使用Ext.QuickTips

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

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

這個在官方的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 = '< 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有更好的方式,如下:

ExtJS Grid Tooltip實現之三：行提示 RowTip

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

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;    
            }    
        }    
    });    
});   

ExtJS Grid Tooltip實現之四：其他方法？

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

【編輯推薦】

1. JavaScript異步調用框架的鏈式實現
2. JavaScript異步調用框架的jQuery風格鏈式調用
3. JavaScript異步調用框架的代碼實現
4. JavaScript異步調用框架用例設計
5. JavaScript異步調用框架問題描述