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
'자바스크립트 > Ext JS' 카테고리의 다른 글
ExtJS로 사이트를 만들고 있습니다. (2) | 2013.07.03 |
---|---|
[ExtJS 오프라인 강좌]ExtJS Class System & MVC 알아보기 (0) | 2013.06.24 |
[Cookbook Study Ch01]9. Overriding Ext JS' Functionality - Part 2 (0) | 2013.05.22 |
[Cookbook Study Ch01]9. Overriding Ext JS' Functionality (0) | 2013.05.22 |
[Cookbook Study Ch01]8. Extending Ext JS Components (0) | 2013.05.22 |