首页 > 解决方案 > 列标题中有省略号时的 ExtJS 工具提示

问题描述

我需要用省略号在列标题中显示一个工具提示。方法是溢出,不起作用,因为我的标题 el.scrollWidth = el.offsetWidth

isOverflow: function (el) {
        return el.scrollWidth > el.offsetWidth;
    },

标签: extjsheadergridtooltipellipsis

解决方案


我通常在列调整大小时这样做:

listeners:{
    columnResize: {
        fn: function (ct, column, width, eOpts){   
                 //check overflow
                 if (column.textEl.dom.offsetWidth<column.textInnerEl.dom.offsetWidth-5){
                     var tip = Ext.create('Ext.tip.ToolTip', {
                                    target: column.titleEl.dom,
                                    html: column.text,
                                    autoDestroy: true
                               });
                      column.tooltip = tip;

                 } else {
                      //Remove when title visible
                      if (column.tooltip!=null)
                             column.tooltip.destroy();
                            
                 }
             }
        }
   }

推荐阅读