為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