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
    36,791
    Answers
    3465
    Vote Rating
    833
    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,732
    Answers
    33
    Vote Rating
    104
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi