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 {
   ...
}

Answer 2

The problem is that the rule

.x-border-box .x-reset,.x-border-box .x-reset * {box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;}

is somehow being applied for all page elements, also for Twitter Bootstrap input's (tested on FF, Chrome). So you should simply provide

box-sizing:content-box !important;
-moz-box-sizing:content-box !important; /* Firefox */
-webkit-box-sizing:content-box !important; /* Safari */

for all Twitter input's. Additional info on box-sizing.

I hope that this helps.