看到问答里面的:http://www.iteye.com/problems/19761 就顺便总结点自己的体会吧。

?

?

1.表头提示

?

在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:

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

代码:

//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有更好的方式,如下:

?

3.行提示 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 sepe