Come posso evitare che ExtJS 4.1.1 rovini il layout di Twitter Bootstrap 2.2.1?

Question

Non mi piace molto ExtJS ma sono costretto a usarlo. Voglio usare Twitter Bootstrap 2.2.1 per il layout principale e ExtJS per griglie e JS (politica).

Ho un design Bootstrap dall'aspetto impressionante, ma il minuto in cui carico ExtJS, la barra di navigazione, i caratteri, ecc. Vengono tutti intaccati.

C'è un modo per far lavorare insieme i due senza entrare nell'ExtJS e modificare le tonnellate di CSS?

Il file CSS che sto usando è nel seguente percorso (per ExtJS):

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

Grazie

Answer 1

Ecco la mia soluzione:
1.use ext-all-scoped.css invece di ext-all.css
2.Add il seguente codice prima di caricare 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 la seguente dichiarazione ext-all-scoped.css per impedire extjs ri-rendere il corpo con le dichiarazioni conflitto css dopo bootstrap è stato caricato

.x-body { 
    ... 
} 

Answer 2

Il problema è che la regola

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

è in qualche modo essere applicata per tutti gli elementi della pagina, anche per gli input di Twitter Bootstrap (testati su FF, Chrome). Così si dovrebbe semplicemente fornire

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

per tutti gli input di Twitter. Ulteriori informazioni su box-sizing.

Spero che questo aiuti.