Kill the x-border-box class

ExtJs Chart를 기존 페이지에 꾸겨 넣으면서 ext-all.css 를 불러와야 하는 일이 발생했다. 사실 css는 빼고 ext-all-new.js만 불러오고 싶었지만 차트 위에 마우스를 올리면 간단히 값을 보여주는 효과? 를 볼 수 없는 상황이 되버리니 어케든 css를 불러와야만 했다.

근본적으로 이 css를 link 시키면 최상위 html 태그에 x-border-box와 x-strict 클래스가 자동으로 붙어버린다. x-strict는 잘 모르겠고 x-border-box 때문에 기존에 남아있던 모양이 산발적으로 어그러진다. 뭔가 패턴이라도 좀 보이면 잡아볼텐데 그마저도 종잡을 수 없어 디자이너와 멱살잡이를 피하려면 이놈 역시 내손에서 처리해야 하는 상황

stackoverflow를 비롯해 많은 분들이 scopeResetCSS 를 활용하는 방안을 제시하고 다들 잘 사용하고 있는거 같은데… 이번에도 역시 내가 만지는 페이지에선 제대로 먹질 않네… 약간 오래된 방법인가 😕

CSS를 리셋한다던가 ext-all.css를 바꿔볼까도 생각했지만 다 부질없어 보이고 결국 Ext.onReady에서 jQuery의 removeClass를 사용하니 제대로 작동

<script>
    Ext.onReady(function () {
        $('.x-border-box').removeClass('x-border-box');
    });
</script>

jQuery의 $(document).ready도 있긴 한데.. 이미 부모? 페이지에서 사용해서 그런지 코드량이 많아서인지 제대로 동작을 안한다. 따지고보면 ExtJs 에서 html 태그에 자동으로 css 클래스를 붙이는거니 시점상으로 ExtJs.onReady에서 removeClass를 사용하는게 맞는거 같기도 하고…
ExtJs, jQuery 섞어쓰는 것에 대한 얘기는 좀 보이는데 아직 ready 메서드간의 차이는 잘 모르겠다.

ExtJS 4.0.2a 와 Web Application 간의 CSS 문제 해결을 위한 “ScopeResetCSS”
disable css classes using jquery just like with firebug, is it possible?
.removeClass()
Ext.dom.AbstractElement removeCls

그나마 아래의 글에서 둘간의 차이점을 나열하고 있긴 하지만 내 관심사와는 좀 다른거 같다.
무엇보다 마지막에 5가지로 요약한 차이점중 4번은 전혀… 인정할수 없어 👿

Difference Between ExtJS and jQuery

4.ExtJS is easier to use than jQuery

Advertisements
%d bloggers like this: