सजा चरम JS4

अपनी परियोजनाओं में एक्सटीजेएस का उपयोग करना, आपको लगातार एक ही नीले-नीले इंटरफ़ेस को देखना होगा, जो हमेशा अच्छा नहीं होता है। इस फ्रेमवर्क के चौथे संस्करण में SASS मैटलैन्गुएज के उपयोग के आधार पर मैन्युअल सीएसएस संपादन के बिना आपके वेब एप्लिकेशन की उपस्थिति को बदलने के लिए एक सुविधाजनक घटक है। इसके साथ, आप एक इंटरफ़ेस प्राप्त कर सकते हैं जो मानक फ़ाइल की तरह नहीं दिखता है, कॉन्फ़िगरेशन फ़ाइल में सिर्फ कुछ पंक्तियों को प्रतिस्थापित करता है।

आप लिंक पर SASS के बारे में अधिक पढ़ सकते हैं, मैं सिर्फ इतना कहूंगा कि यह CSS एक्सटेंशन आपको चर, फ़ंक्शन और एक फ़ाइल को दूसरे में शामिल करके शैली की अनुमति देता है।

शुरुआत हो रही है

इसलिए, सजावट के लिए, मैं एक मानक उदाहरण ext - themes.js लेता हूं, जो लगभग सभी इंटरफ़ेस तत्वों को उत्पन्न करता है ताकि आप परिणाम देख सकें। सजावट से पहले पृष्ठ कैसा दिखता है:

सजावट के लिए, हमें निम्नलिखित घटकों की आवश्यकता है:
1. माणिक
2. कम्पास / SASS मणि। स्थापित करने के लिए, रूबी के साथ कमांड लाइन चलाएं (रूबी के साथ कमांड प्रॉम्प्ट शुरू करें) और दर्ज करें:
> gem install compass
Ext JS (4.0.7 और उससे कम) का वर्तमान संस्करण SASS के नवीनतम संस्करणों के साथ संगत नहीं है, इसलिए आपको निम्न कार्य करने की आवश्यकता है:
> gem uninstall sass
> gem install sass -v 3.1.1
स्थापित संस्करण की जाँच कमांड द्वारा की जाती है
> compass -v
> sass –v

फ़ोल्डर संरचना

मान लीजिए कि हमारा आवेदन साइट की जड़ में है, और अतिरिक्त घटक resources/ext/ फ़ोल्डर में हैं
स्टाइलिंग के लिए जो मानक एक्सट घटकों को प्रभावित नहीं करता है, आपको एक्सट्रीम फोल्डर से अन्य स्थानों पर संसाधनों को कॉपी करने की आवश्यकता है:
resources/ फ़ोल्डर resources/extjs/resources/themes/templates/resources/ की सामग्री को कॉपी करने के लिए resources/ फ़ोल्डर।
सभी फ़ोल्डर resourses/extjs/resources/themes/images/default से कॉपी /resources/images ।
और अंत में, आपको संकलित सीएसएस फ़ाइल के लिए resourses/css/ फ़ोल्डर बनाने की आवश्यकता है।
उसके बाद, हम जाँचते हैं कि ext का सही सापेक्ष मार्ग संसाधनों / sass / config.rb फ़ाइल में निर्दिष्ट है: $ext_path = "../ext"
और ExtJS कोड (संस्करण 4.0.7) में एक बग के कारण, आपको 62 पंक्तियों में इसे प्रतिस्थापित करके /extjs/resources/themes/lib/utils.rb फ़ाइल को ठीक करना होगा:

images_path = File.join($ext_path, 'resources' , 'themes' , 'images' , theme)

दूसरे को:

images_path = relative_path


यह सुनिश्चित करना है कि चित्रों का उपयोग वास्तव में resources/images फ़ोल्डर से किया जाता है, न कि resources/extjs/resources/images

अपने सीएसएस बनाएँ

इसलिए, जब तैयारी पूरी हो जाती है, तो आप अपनी खुद की शैली संकलित कर सकते हैं। रूबी कमांड लाइन खोलें, संसाधनों / सैस फ़ोल्डर पर जाएं और दर्ज करें:
> compass compile
यदि सब कुछ पहले सही ढंग से किया गया है, तो resources/ss फ़ोल्डर में .scs फ़ाइल के समान नाम के साथ एक .ccs फ़ाइल होगी। इस शैली का उपयोग करना न भूलें:

< link rel ="stylesheet" type ="text/css" href ="resourses/css/my-ext-theme.css" />

हम पृष्ठ को ताज़ा करते हैं, और हम देखते हैं कि कुछ भी नहीं बदला है। यह सामान्य है, क्योंकि हमने अभी तक एक भी चर नहीं बदला है। चलो कुछ बदल देते हैं। resources/sass/my-ext-theme.scss और इसे संपादित करें। सबसे पहले, लाइन को अनफॉलो करके एक नया बेस कलर सेट करें

$ base-color: #FFF;

परिणाम आश्चर्यजनक है, लेकिन संपूर्ण सुंदरता के लिए कुछ तत्वों को ठीक करना आवश्यक है जो विषय में नहीं आए थे। परिवर्तन के लिए उपलब्ध चरों की पूरी सूची resources/ext/resources/themes/stylesheets/ext4/default/variables फ़ोल्डर में फाइलों में निहित है
उन्हें फिर से परिभाषित करने के लिए, आपको बस हमारी थीम फ़ाइल में वांछित चर को कॉपी करने की आवश्यकता है, एक नया रंग असाइन करें और थीम को फिर से बनाएं। उदाहरण के लिए, पैनल शीर्षक के रंग को ओवरराइड करने के लिए, लिखें:

$ panel-header-color: #d12c31;

सभी चर के उचित नाम हैं, इसलिए उनके उद्देश्य का अनुमान लगाना आसान है:
$panel-border-radius - पैनल हेडिंग के गोलाई का त्रिज्या
$toolbar-background-color - टूलबार पृष्ठभूमि रंग

माउस

एक्स्ट में स्प्राइट्स का उपयोग आइकनों के रूप में किया जाता है, इसलिए, इस मामले में, चर बदलना अपरिहार्य है, हालांकि, चूंकि हमने छवियों को एक अलग फ़ोल्डर में कॉपी किया है, हम स्प्राइट को वहां के आइकनों से बदल सकते हैं। दुर्भाग्य से, GIF प्रारूप का उपयोग किया जाता है, इसलिए आपको PNG का उपयोग करने के लिए थोड़ी खुदाई करनी होगी।
सबसे आसान तरीका एक अतिरिक्त ext-override.css सीएसएस फ़ाइल बनाना है और इसमें आइकन फ़ाइल के लिए पथ को फिर से परिभाषित करना है। यह उपयोगी भी है क्योंकि कुछ तत्व सजावट के दौरान दिखाई देते हैं जो चर की मदद से नहीं बदलते हैं और यहां भी परिभाषित करना होगा ताकि वे हर बार स्थिर रहें जब आप मुख्य फाइल my-ext-theme.css अधिलेखित करते हैं
इसलिए, पैनल में टूल आइकन बदलें:

.x-tool img {
background-image: url( '../resources/images/tools/tool-sprites.png' ) !important;
/*
due to use .png instead of .gif
*/
}

अनुकूलता

CSS3 समर्थन के बिना विरासत ब्राउज़र की संगतता के लिए, Ext3 विशेष छवि-आधारित मार्कअप कोड बनाता है। बेशक, जब तस्वीर को स्टाइल करते हैं, तो आपको इसे बदलना चाहिए, और इसके लिए, डेवलपर्स ने सेन्चा एसडीके टूल्स - थीम स्लीकर में एक विशेष घटक प्रदान किया है। शैली से चित्र बनाने के लिए आपको बस एक कमांड दर्ज करने की आवश्यकता है:
> sencha slice theme -d resources/ext -c resources/css/my-ext-theme.css -o resources/images -v
उपयोग किए गए पैरामीटर:

• --cs [=] मान, -c [=] मान प्रयुक्त सीएसएस फ़ाइल का पथ। यदि निर्दिष्ट नहीं है, तो मानक
• --ext-dir [=] value, -d [=] value unpacked Ext JS लाइब्रेरीज़ के लिए पथ आवश्यक है
• --manifest [=] मान; -m [=] मान .manifest फ़ाइल का पथ उपयोगिता द्वारा उपयोग किया जाता है, डिफ़ॉल्ट है
• --output-dir [=] value, -o [=] value तैयार चित्रों की रिकॉर्डिंग के लिए पथ। यदि निर्दिष्ट नहीं है, तो वर्तमान फ़ोल्डर में लिखा जाता है
• --verbose, -v प्रत्येक उत्पन्न छवि के बारे में एक संदेश प्रदर्शित करें

इन कार्यों के बाद, डेवलपर्स IE6 समावेशी से पुराने ब्राउज़रों में सही प्रदर्शन का वादा करते हैं।

परिणाम

हमारे सभी कार्यों के परिणामस्वरूप, हमें कुछ ऐसा मिलता है:

इस प्रकार, एक्सट आपको अपने इंटरफेस को स्वतंत्र रूप से सजाने की अनुमति देता है और व्यवस्थित रूप से इसे आपकी साइट और इसकी रंग योजना के डिजाइन में फिट करता है।
इस उदाहरण को जीथब पृष्ठ पर देखा जा सकता है।
लेख तैयार करने में, आधिकारिक एक्स्ट वेबसाइट से अंग्रेजी भाषा के मैनुअल का उपयोग किया गया था