PDA

View Full Version : How to disable Ext-JS polluting HTML with extra class/ID attributes



vienzo
15 Feb 2012, 5:12 AM
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.

mitchellsimoens
15 Feb 2012, 6:08 AM
There is no config or anything not to do that, it's all in the css files so JS won't touch it.

vienzo
15 Feb 2012, 6:39 AM
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.

mankz
15 Feb 2012, 2:09 PM
See :

http://stackoverflow.com/questions/6435833/how-to-scope-the-reset-css-so-that-is-applied-to-ext-components-using-scopereset

And you can also do:


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.

vienzo
17 Feb 2012, 6:33 AM
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:

<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:
31831
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?