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.

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.

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.

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).