2012-11-06 8 views
6

मुझे वास्तव में ExtJS पसंद नहीं है लेकिन मुझे इसका उपयोग करने के लिए मजबूर किया गया है। मैं मुख्य लेआउट और ग्रिड और जेएस (नीति) के लिए ExtJS के लिए ट्विटर बूटस्ट्रैप 2.2.1 का उपयोग करना चाहता हूं।मैं ट्विटर बूटस्ट्रैप 2.2.1 लेआउट को गड़बड़ करने से ExtJS 4.1.1 को कैसे रख सकता हूं?

मेरे पास एक शानदार दिखने वाला बूटस्ट्रैप डिज़ाइन चल रहा है लेकिन जिस मिनट में मैं एक्स्टजेस, नेविबार, फोंट इत्यादि लोड करता हूं, सब कुछ हो जाता है।

क्या कोई तरीका है कि मैं दोनों को एक्स्टजेस में जाकर और सीएसएस के tweaking बिना एक साथ काम करने के लिए मिल सकता है?

सीएसएस फ़ाइल मैं उपयोग कर रहा हूँ निम्नलिखित पथ (ExtJS के लिए) में है:

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

धन्यवाद

+0

लोड किया गया है आप लोड हो रहा है की कोशिश की बूटस्ट्रैप सी है आखिरी बार? – dbrin

+1

कोशिश करें [extjs-theme-boot-bootstrap] (https://github.com/NewbridgeGreen/extjs-theme-bootstrap) - ExtJS 4 के लिए ट्विटर बूटस्ट्रैप थीम –

उत्तर

3

यहाँ मेरी समाधान है: इससे पहले कि आप ext-all.js लोड
1.use ext-सब-scoped.css बजाय ext-all.css
निम्नलिखित कोड 2.add

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

ext-सब-scoped.css में निम्नलिखित घोषणा उन संघर्ष सीएसएस घोषणाओं के साथ शरीर को फिर से प्रस्तुत करने के लिए ExtJS को रोकने के लिए 3.Remove के बाद बूटस्ट्रैप

.x-body { 
    ... 
} 
2
समस्या

है नियम है कि

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

किसी भी तरह के लिए आवेदन किया जा रहा है सभी पेज तत्व, ट्विटर बूटस्ट्रैप इनपुट के लिए भी (एफएफ, क्रोम पर परीक्षण)। तो आप बस

box-sizing:content-box !important; 
-moz-box-sizing:content-box !important; /* Firefox */ 
-webkit-box-sizing:content-box !important; /* Safari */ 
सभी ट्विटर इनपुट के लिए

प्रदान करना चाहिए। box-sizing पर अतिरिक्त जानकारी।

मुझे उम्मीद है कि इससे मदद मिलती है।

संबंधित मुद्दे