EXT表格内容单元格悬浮提示

在项目中有些表格的单元格内容过长，不方便用户查看，故需要增加悬浮显示效果。在网上查询一些方法后，有些EXT版本高，项目中不支持方法，有些不太实用。在这里记录下解决方法：

//在所需悬浮显示的JS页面中，增加以下Ext代码
Ext.ToolTip.prototype.onTargetOver =
        Ext.ToolTip.prototype.onTargetOver.createInterceptor(function(e) {
            this.baseTarget = e.getTarget();
        });
Ext.ToolTip.prototype.onMouseMove =
        Ext.ToolTip.prototype.onMouseMove.createInterceptor(function(e) {
            if (!e.within(this.baseTarget)) {
                this.onTargetOver(e);
                return false;
            }
        });

//在表格声明时加入以下Ext代码（黑色加粗）
var grid = new Ext.grid.GridPanel({
       region : 'center',
       ....,
       onRender: function() {
            Ext.grid.GridPanel.prototype.onRender.apply(this, arguments);
            this.addEvents("beforetooltipshow");
            this.tooltip = new Ext.ToolTip({
                renderTo: Ext.getBody(),
                target: this.view.mainBody,
                listeners: {
                    beforeshow: function(qt) {
                        var v = this.getView();
                        var row = v.findRowIndex(qt.baseTarget);
                        var cell = v.findCellIndex(qt.baseTarget);
                        this.fireEvent("beforetooltipshow", this, row, cell);
                    },
                    scope: this
                }
            });
        },
        stripeRows: true,
        ....,
        bbar : pagingToolbar,
    listeners: {
            render: function(g) {
                g.on("beforetooltipshow", function(grid, row, col) {
                    var colname = grid.getColumnModel().getDataIndex(col);  //获取列名      
                    var celldata = grid.getStore().getAt(row).get(colname); //获取数据  
                    grid.tooltip.body.update("Tooltip for (" + celldata + ")");
                });
            }
        }
});