Wie kann ich ExtJS 4.1.1 davon abhalten, das Twitter Bootstrap 2.2.1 Layout durcheinander zu bringen?

Question

Ich mag ExtJS wirklich nicht, aber ich bin gezwungen, es zu benutzen. Ich möchte Twitter Bootstrap 2.2.1 für das Hauptlayout und ExtJS für Raster und JS (Politik) verwenden.

Ich habe eine ehrfürchtig aussehende Bootstrap-Design gehen, aber die Minute, die ich ExtJS laden, die Navigationsleiste, Schriften, etc. bekommen alle verstopft.

Gibt es eine Möglichkeit, die ich bekommen kann, die beiden zusammen zu arbeiten, ohne in die ExtJS und zwicken Tonnen von CSS zu gehen?

Die CSS-Datei, die ich verwende, befindet sich im folgenden Pfad (für ExtJS):

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

Danke

Answer 1

Hier ist meine Lösung:
1. ext-all-scoped.css anstelle von ext-all.css verwenden
2. Fügen Sie den folgenden Code ein, bevor Sie ext-all.js laden

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

3.entfernen Sie die folgende Deklaration in ext-all-scoped.css, um zu verhindern, dass extjs den Body mit diesen Konflikt-Css-Deklarationen nach dem Laden von Bootstrap neu aufbereitet

.x-body {
   ...
}

Answer 2

Das Problem ist, dass die Regel

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

wird irgendwie auf alle Seitenelemente angewendet, auch auf Twitter Bootstrap-Eingaben (getestet auf FF, Chrome). Sie sollten also einfach Folgendes angeben

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

für alle Twitter-Eingaben. Zusätzliche Informationen über Box-Sizing .

Ich hoffe, dass dies hilfreich ist.