Extjs4.2.0 Grid 的单元格提示

官方docs有个例子，给出的是行提示

var view = grid.getView();
var tip = Ext.create('Ext.tip.ToolTip', {
    // The overall target element.
    target: view.el,
    // Each grid row causes its own separate show and hide.
    delegate: view.itemSelector,//选择器这里选择'tr.x-grid-row';被选择器选中的元素都会添加tip
    // Moving within the row should not hide the tip.
    trackMouse: true,
    // Render immediately so that tip.body can be referenced prior to the first show.
    renderTo: Ext.getBody(),
    listeners: {
        // Change content dynamically depending on which element triggered the show.
        beforeshow: function updateTipBody(tip) {
　　　　　　 //view.getRecord(tip.triggerElement)//参数是Ext.Element/HTMLElement；当前使用的是 HTMLElement tr元素
            tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"');
        }
    }
});

/*
可见如果要改成单元格提示
1.更改选择器参数为 单元格，可以通过fierbug 查看你所需要的元素特征来设置
2.getRecord 需要一个 HTMLElement(表格行tr)参数；当我们的选择器选中了(td),可以通过 (td).parentElement 获取HTMLElement(表格行tr)，完成参数设定
*/

 修改后的源代码如下

var view = grid.getView();
var tip = Ext.create('Ext.tip.ToolTip', {
    // The overall target element.
    title : 'Detail',
    minWidth : 800,
    maxWidth : 800,
    minHeight : 200,
    maxHeight : 200,
    showDelay : 1000,
    autoHide : false,
    target : view.el,
    // Each grid row causes its own separate show and hide.
    delegate : '.x-grid-cell-special',
    // Moving within the row should not hide the tip.
    trackMouse : true,
    // Render immediately so that tip.body can be referenced prior to
    // the first show.
    renderTo : Ext.getBody(),
    listeners : {
        // Change content dynamically depending on which element
        // triggered the show.
        beforeshow : function updateTipBody(tip) {
            if (Ext.EventObject.getCharCode() !== Ext.EventObject.ALT)//按住alt键才提示
                return false;
            var vid = view.getRecord(tip.triggerElement.parentElement).get('Fid');
            // var vid = view.getRecord(tip.triggerElement).get('Fid');
            tip
                    .update('<iframe frameborder="0" width="780" height="180" src=S/xs_markets/xs_markets_list_data.asp?Act=getDetail&Fid='
                            + vid + '&pp=0></iframe>');
        }
    }
});