How can I keep ExtJS 4.1.1 from messing up the Twitter Bootstrap 2.2.1 layout?

Question

I really don't like ExtJS but I'm forced to use it. I want to use Twitter Bootstrap 2.2.1 for the main layout and ExtJS for grids and JS (policy).

I have an awesome looking Bootstrap design going but the minute I load ExtJS, the navbar, fonts, etc get all hosed up.

Is there a way I can get the two to work together without going into the ExtJS and tweaking tons of CSS?

The CSS file I am using is in the following path (for ExtJS):

js/extjs/4.1.1/resources/css/ext-all-gray.css

Thanks

Answer 1

Here is my solution:
1.use ext-all-scoped.css instead of ext-all.css
2.add the following code before you load ext-all.js

<script type='text/javascript'>
Ext = {
    buildSettings:{
        "scopeResetCSS": true
    }
};
</script>
<script type='text/javascript' src='http://xxx.com/extjs/ext-all.js'></script>

3.remove the following declaration in ext-all-scoped.css to prevent extjs to re-render the body with those conflict css declarations after bootstrap has been loaded

.x-body {
   ...
}