Results 1 to 3 of 3

Thread: Constraining Ext styles to a section of the page 4.2.0

  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    0
      0  

    Default Constraining Ext styles to a section of the page 4.2.0

    Hi,

    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:
    Code:
    <html id="dummyID">
    <!-- The above ID must be removed as it can not be added through the content management system -->
    <head>
    <!-- stuff -->
    </head>
    <body>
    <!-- stuff from content management system -->
    <div id="myWidgetContainer">
    <script type="text/javascript">
      Ext.onReady(function({
        // Remove .x-border-box class from whole document starting at html tag
        var el = Ext.get("dummyID");
        el.removeCls("x-border-box");
    
        // more code to dynamically apply .x-border-box class to all content inside the container div
      });
    </script>
    </div>
    <!-- more stuff from content management system -->
    </body>
    </html>
    1. Is my approach appropriate or is there a better way?
    2. If this is a good approach, then I will have to be able to access the root html tag. the
      Code:
      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?

  2. #2
    Sencha - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Answers
    501
    Vote Rating
    257
      0  

    Default

    Check out this post. I think it will help you out:
    http://www.sencha.com/forum/showthread.php?260608

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    0
      0  

    Default Thank you

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •