1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    vienzo is on a distinguished road

      0  

    Default Unanswered: How to disable Ext-JS polluting HTML with extra class/ID attributes

    Unanswered: How to disable Ext-JS polluting HTML with extra class/ID attributes


    The problem is that in any html page where ext-js script is included, you get class="x-border-box x-quirks" set on HTML element and some similar class and ID attributes on your BODY tag. Is there any way to disable this effect?

    I see this as potential issue when styling a more complex HTML page. Let's say I only want to insert Ext.grid.Panel component into my existing page structure, but what I get instead is the grid (which I need) plus those weird class names on my existing content. Kind of lost my confidence in Ext-JS when I noticed what it does behind the scenes.

    Any input to that would be appreciated, as documentation is lacking when we need it.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    There is no config or anything not to do that, it's all in the css files so JS won't touch it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    vienzo is on a distinguished road

      0  

    Default


    Thanks for the reply, but how come JS won't touch it - on page load its the javascript who attaches class selectors to HTML/BODY elements, which are later picked up by CSS. Or I don't follow your idea?

    My question is still unanswered: why Ext-JS does not provide any configs to disable generating those extra class names on my page? If I put a Grid on my page, I'd expect it to render grid to the container I provide and nothing else.

  4. #4
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,783
    Vote Rating
    112
    Answers
    33
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    See :

    http://stackoverflow.com/questions/6...ing-scopereset

    And you can also do:

    Code:
    Ext.onReady(function() {
                Ext.fly(Ext.getBody().dom.parentNode).removeCls('x-border-box');
            });
    And add that cls manually to the wrapper el of your Grid.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    vienzo is on a distinguished road

      0  

    Default


    Thumbs up for you Mankz!

    Sounds like correct way to solve the issue with buildSettings - that's what I was looking for, although I can't make it work on any environment. Probably I missed something out.. I've simplified this HTML and tested it with v 4.0.2a (as in stackOverflow solution), 4.0.7 and 4.1.0 beta with no success in any of cases.

    Here is the code:
    Code:
    <html>
        <head>
        <link rel="stylesheet" type="text/css" href="js/ext-4.0.7/resources/css/ext-all-scoped.css">
    
    
        <script type="text/javascript">
          Ext = {
            buildSettings:{
               scopeResetCSS: true
            }
          };
        </script>
    
    
        <script type="text/javascript" src="js/ext-4.0.7/ext-all-debug.js"></script>
        <script type="text/javascript">
            Ext.onReady(function() {
                  // simple grid taken from examples goes here, rendered to 'grid-example'
            });
        </script>
    
    
      </head>
    	<body class="my-class"></body>
    </html>
    After rendering this, I get the following:
    Untitled.png
    I tried manually removing x-border-box and x-quirks from HTML and adding the x-border-box to 'grid-example' div (before and after render), but none of those did any changes to eventual HTML, it still gets polluted. I could of course remove all class selectors that I don't want from HTML/BODY after page render, but this sounds really hackish (e.g. what if Sencha guys decide to put some other selector instead of x-border-box, - my code would break).

    Is it just me doing it wrong?
    Attached Images
    Last edited by vienzo; 17 Feb 2012 at 6:40 AM. Reason: messed up editor...

Thread Participants: 2

Tags for this Thread