자바스크립트/Ext JS2013. 5. 25. 14:22

ExtJs 4.2 버전에서 전에 없던 툴팁 버그가 발생한다. 아래 그림과 같이 툴팁의 길이가 동적으로 늘어나지 않고 

텍스트가 일정크기 이상으로 늘어나지 않고 갇히게 된다.



이를 해결하기 위해 아래와 같이 Ext.tip.QuickTip클래스를 override한다.


Ext.override(Ext.tip.QuickTip, {
    helperElId: 'ext-quicktips-tip-helper',
    initComponent: function ()
    {
        var me = this;


        me.target = me.target || Ext.getDoc();
        me.targets = me.targets || {};
        me.callParent();


        // new stuff
        me.on('move', function ()
        {
            var offset = me.hasCls('x-tip-form-invalid') ? 35 : 12,
                helperEl = Ext.fly(me.helperElId) || Ext.fly(
                    Ext.DomHelper.createDom({
                        tag: 'div',
                        id: me.helperElId,
                        style: {
                            position: 'absolute',
                            left: '-1000px',
                            top: '-1000px',
                            'font-size': '12px',
                            'font-family': 'tahoma, arial, verdana, sans-serif'
                        }
                    }, Ext.getBody())
                );

            if (me.html && (me.html !== helperEl.getHTML() 
            		|| me.getWidth() !== (helperEl.dom.clientWidth + offset)))
            {
                helperEl.update(me.html);
                me.setWidth(Ext.Number.constrain(helperEl.dom.clientWidth + 
                	offset, me.minWidth, me.maxWidth));
            }
        }, this);
    }
});

적용 이후 아래와 같이 정상적으로 툴팁이 보여진다.


// 출처 : http://stackoverflow.com/questions/15834689/extjs-4-2-tooltips-not-wide-enough-to-see-contents

Posted by 베니94