View Full Version : Constraining Ext styles to a section of the page 4.2.0

21 Apr 2013, 9:20 PM

I have a widget developed with ext-js that can be embedded on any page. Unfortunately when adding the widget to a CMS page the .x-border-box (and many others) style is applied from the root html tag through the whole document.

Some sort of scoping for CSS seemed to be available in 4.1.7 however this has been removed from 4.2.0. My approach is to allow the page to load, then to manually remove the automatically applied classes, and apply to only the required area.

This works:

<html id="dummyID">
<!-- The above ID must be removed as it can not be added through the content management system -->
<!-- stuff -->
<!-- stuff from content management system -->
<div id="myWidgetContainer">
<script type="text/javascript">
// Remove .x-border-box class from whole document starting at html tag
var el = Ext.get("dummyID");

// more code to dynamically apply .x-border-box class to all content inside the container div
<!-- more stuff from content management system -->
Is my approach appropriate or is there a better way?
If this is a good approach, then I will have to be able to access the root html tag. the
Ext.getDoc() seems to return an object but unfortunately I've not been able to apply the above to the result. How can I get a handle on the html tag to remove the class?

23 Apr 2013, 12:59 PM
Check out this post. I think it will help you out:

23 Apr 2013, 5:15 PM
Thank you slemmon for directing me to the post. It was very helpful. Unfortunately it didn't seem to work. Perhaps I was applying the fix incorrectly. I loaded it as inline script in the head tag.

My original approach that depends on an ID in the html tag is working, so for the moment I'll stick with that until 4.2.1 is released.

I appreciate all of your good work. Thank you.