1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    0
    philsmithsemail is on a distinguished road

      0  

    Default Unanswered: Constraining Ext styles to a section of the page 4.2.0

    Unanswered: 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 - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,781
    Answers
    356
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    philsmithsemail is on a distinguished road

      0  

    Default Thank you

    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.

Thread Participants: 1

Tags for this Thread