为Extjs的GridPanel添加单元格的ToolTip功能

在Extjs的GridPanel中，要想给单元格拥有ToolTip功能（鼠标移动到单元格上方时，显示一个小提示，这个小功能的好处是当列宽不足时，过长的内容被隐藏了，也可以通过ToolTip看到全部内容），一种常见的方法是，在ColumnModel中配置renderer，然后使用ext:qtip属性来实现(Extjs4以前，Extjs4后使用data-qtip与data-qtitle)，就像这样：

//适用于Extjs2.x 3.x

renderer : function(value){
    return '<span ext:qtip="'+value'">'+value+'</span>';
}

//适用于Extjs4.x

renderer : function(value){
    return '<span data-qtip="'+value'">'+value+'</span>';
}

实现效果：

这样做能达到效果，但有个不方便的地方，就是每一列都要重复的配置这样的renderer，如果能简化这个操作当然最好了，所以有了第二种方法，自动为单元格加上ToolTip：

//适用于Extjs3.x

Ext.override(Ext.grid.GridPanel, {
    afterRender : Ext.grid.GridPanel.prototype.afterRender.createSequence(
        function() {
            if (!this.cellTip) {
                return;
            }
            var view = this.getView();
            this.tip = new Ext.ToolTip({
                target : view.mainBody,
                delegate : '.x-grid3-cell-inner',
                trackMouse : true,
                renderTo : document.body,
                listeners : {
                    beforeshow : function updateTipBody(tip) {
                        if (Ext.isEmpty(tip.triggerElement.innerText)) {
                            return false;
                        }
                        tip.body.dom.innerHTML = tip.triggerElement.innerText;
                    }
                }
            });
        })
});

//适用于Extjs4.x

Ext.override(Ext.grid.GridPanel, {
    afterRender : Ext.Function.createSequence(Ext.grid.GridPanel.prototype.afterRender,
        function() {
            if (!this.cellTip) {
                return;
            }
            var view = this.getView();
            this.tip = new Ext.ToolTip({
                target : view.el,
                delegate : '.x-grid-cell-inner',
                trackMouse : true,
                renderTo : document.body,
                listeners : {
                    beforeshow : function updateTipBody(tip) {
                        if (Ext.isEmpty(tip.triggerElement.innerText)) {
                            return false;
                        }
                        tip.body.dom.innerHTML = tip.triggerElement.innerText;
                    }
                }
            });
        })
});

思路是在GridPanel的afterRender方法上加上一段代码，通过增加一个配置项cellTip(true/false)来控制是否启用Tooltip功能。而且整个GridPanel只使用一个Ext.ToolTip实例，在显示的时候将内容替换为单元格的内容，这样做还有一个好处是能保留原来内容的所有格式。

此段代码只需要加载一次，就会对所有的GridPanel产生作用，使用时，只需要在GridPanel里增加一个配置 cellTip:true 即可实现ToolTip功能：

var grid = new Ext.grid.GridPanel({
    cellTip:true,
    stripeRows: true,
    autoExpandColumn: 'company',
    height: 350,
    width: 600,
    title: 'Array Grid',
    // ......
}

 

Technorati 标记: Extjs,GridPanel,Tooltip