👨🏼‍⚕️ 👇🏽 👩🏽‍🎤 ExtJS: स्थान चयन नियंत्रण 🤙🏻 🍹 👨🏻‍🏫

कई परियोजनाएं वर्तमान में अपने ग्राहकों के लिए स्थान की जानकारी का उपयोग करती हैं। इनमें ऑनलाइन स्टोर, डेटिंग साइट, बैंकिंग ऑपरेटिंग संसाधन और बहुत कुछ शामिल हैं। यह इस तरह की सूचना को इंगित करने वाले तत्व के बारे में है कि यह लेख होगा: Ext.ux.locationSelect ने एक्सटीजेएस 2 फ्रेमवर्क के क्षेत्र में लागू किया।

एक छोटा डेमो आगे पढ़ने की आवश्यकता के बारे में सवाल का जवाब देने में मदद करेगा।

सार

ऐसा ऐतिहासिक रूप से हुआ कि स्थान चुनने के लिए शासी तत्व (हम स्थान, स्थान आदि का निर्धारण करने के लिए इस शब्द का उपयोग करेंगे) एक पॉपअप विंडो है जिसमें कई परस्पर जुड़ी सूचियाँ हैं जो आपको बाद में स्थान भाग को निर्दिष्ट करने की अनुमति देती हैं। कुल नियंत्रण सुविधाजनक, असंगत है, लेकिन कुछ हद तक पुराना है। यहाँ समाधान के पहले विशिष्ट मंत्र हैं:

आगंतुक को सभी नियंत्रण से अवगत कराने के लिए पॉपअप विंडो;
डेटा चयनों की कैशिंग की कमी;
कमजोर एक्स्टेंसिबिलिटी - किसी भी कार्यक्षमता को स्वतंत्र रूप से लागू किया जाना चाहिए।

आपको क्या चाहिए

परियोजनाओं में से एक में, मुझे उपरोक्त सभी को प्राप्त करने की आवश्यकता है और, इसके अलावा, निम्नलिखित का निरीक्षण करें:

खिड़की आधारित डिजाइन - संसाधन को गहन रूप से संपादित किया गया है और इसे इंटरफ़ेस विंडो बनाने का निर्णय लिया गया;
चूँकि पेज उस पर घंटों काम करने के बाद पुनः लोड नहीं हो सका, इसलिए डेटा कैशिंग का मुद्दा बहुत तीव्र है;
यह न केवल स्थानों के चयन की अनुमति देने के लिए आवश्यक है, बल्कि उन्हें सही ढंग से प्रदर्शित करने के लिए भी है, उदाहरण के लिए, संपादन जैसे हालात, जब सभी चयन पहले से ही चिह्नित हैं और संबंधित सूचियां पहले से ही भरी हुई हैं।

कार्रवाई में नियंत्रण

ExtJS डेवलपर्स के कौशल और अंतर्दृष्टि के लिए धन्यवाद, का उपयोग करना, व्यावहारिक रूप से इस पैकेज के मानक घटकों का उपयोग करने से अलग नहीं है - Ext.ux.locationSelect बनाना और उपयोग करना एक नियमित पैनल बनाने के रूप में आसान है।

संबंध

कनेक्शन हमेशा की तरह लागू है। यदि एक्सटीजेएस पहले से ही उपयोग में है, तो आपको केवल विस्तार को स्वयं कनेक्ट करने की आवश्यकता है:

  <Head>
     <script type = "text / javascript" src = "/ lib / ext / अनुकूलक / ext / ext-base.js"> </ script>
     <script type = "text / javascript" src = "/ lib / ext / ext-all.js"> / / />
     <script type = "text / javascript" src = "/ lib / ext / ux / locationSelect.js"> </ script>
     <लिंक href = "/ lib / ext / Resources / css / ext-all.css" rel = "स्टाइलशीट" प्रकार = "टेक्स्ट / css" />
 </ Head>

शो के लिए:
दस्तावेज़ के सही DOCTYPE का उपयोग करें, अक्सर कई nontrivialities एक बार और सभी के लिए सही मोड में काम करना शुरू करके हल किया जा सकता है।

विन्यास और सृजन

इस तथ्य के कारण कि नियंत्रण Ext.form.FieldSet तक फैला है , वह खुद को Ext.FormPanel फ़ील्ड में देखने की अपेक्षा करता है, हालांकि यह एक वैकल्पिक आवश्यकता है।

यह करने के लिए महत्वपूर्ण है:
एपीआई , विन्यास और नियंत्रण के प्रत्येक के लिए कुछ उदाहरणों का एक विस्तृत विवरण एक्सटीजेएस एपीआई प्रलेखन में घटकों, पैकेजों और कक्षाओं के पेड़ के संबंधित भाग में पाया जा सकता है।

इस प्रकार, आप फ़ॉर्म में आइटम में केवल इसकी कॉन्फ़िगरेशन ऑब्जेक्ट जोड़कर नियंत्रण को सक्षम कर सकते हैं:

  var myForm = new Ext.form.FormPanel ({
     आइटम: [{
         xtype: 'locationselect',
         url: '/ someURL',
         उपसर्ग: 'some_location_',
         शीर्षक: 'someFieldSetTitle',
         valueNotFoundText: 'महत्वपूर्ण नहीं'
         सत्यापनकर्ता: फ़ंक्शन () {/ * कुछ js-code * /}
         ऑटोहाइट: सच,
         कैश: someCacheVar
     }]
 });

गैर-मानक कॉन्फ़िगरेशन फ़ील्ड हैं:

url - वह स्थान जहां नियंत्रण स्टोर स्थानों (देशों, क्षेत्रों और शहरों) के हिस्सों की सूचियों के लिए जाएंगे, एक अनुरोध उसी पते पर पूरे स्थान के एक बार लोड करने के लिए भेजा जाएगा। उदाहरण के लिए, रूस | रियाज़ान क्षेत्र | रियाज़ान;
उपसर्ग - चर नामों का उपसर्ग जिसमें स्थान भागों के आईडी सहेजे जाएंगे। उपरोक्त मामले के लिए, सबमिट करते समय, नियंत्रण "उत्पन्न" करेगा और सर्वर को चर_ some_location_country , _some_location_region , _some_location_city भेजेगा ;
valueNotFoundText - इस फ़ील्ड का मान उसी नाम के Ext.form.ComboBox नियंत्रण के कॉन्फ़िगरेशन फ़ील्ड को सौंपा जाएगा;
सत्यापनकर्ता - फ़ंक्शन को स्थान के किसी भी हिस्से का चयन करने की स्थिति में बुलाया जाएगा और उदाहरण के लिए, स्थान को पूरी तरह से इंगित करने के लिए उपकृत करेगा;
कैश - संदर्भ द्वारा पारित वैश्विक चर, जो नियंत्रण द्वारा लोड किए गए सभी डेटा का कैश स्टोरेज होगा। यदि आप एक ही कैश वैरिएबल को उनके डिजाइनरों के पास भेजकर कई नियंत्रण बनाते हैं, तो नियंत्रण सभी के लिए एकल कैश का उपयोग करेगा, जिससे संसाधनों की बचत होगी। यदि पैरामीटर छोड़ा जाता है, तो नियंत्रण के लिए कैश आंतरिक रूप से परिभाषित किया जाएगा।

अगोचर के बारे में:
उपसर्ग-उत्पन्न चर के नामों में अंडरस्कोर नोट करें। तथ्य यह है कि एक्सटीजेएस कार्यान्वयन में कॉम्बो बॉक्स में दो इनपुट फ़ील्ड शामिल हैं - जिनमें से एक फॉर्म सबमिट करते समय एक मान भेजता है यानी आपको प्रत्येक कॉम्बो बॉक्स के लिए दो समान नाम उत्पन्न करने होंगे।

अन्य सभी क्षेत्र सुपरक्लास कॉन्फ़िगरेशन की विरासत हैं।

संपूर्ण स्थान डाउनलोड करें

ऐसे कार्य हैं जब आपको किसी स्थान को चुनने की अनुमति देने की आवश्यकता होती है और उसी समय उस विकल्प को शुरू करना चाहिए जो पहले से स्थापित है - व्यक्तिगत डेटा संपादित करना, एक चाल की व्यवस्था करना, और इसी तरह।

इस प्रयोजन के लिए, नियंत्रण में एक लोडलोकेशन () विधि है, जो प्रारूप {देश: पूर्णांक, क्षेत्र: पूर्णांक, शहर: पूर्णांक} के एक कॉन्फ़िगरेशन ऑब्जेक्ट को स्वीकार करता है। जब इसे कॉल किया जाता है, तो स्थान पैरामीटर के हस्तांतरण के साथ, निर्माण में निर्दिष्ट url पर कॉल किया जाएगा। यदि लौटा डेटा एक मान्य प्रारूप से मेल खाता है, तो डेटा के साथ सूचियों को संबंधित कॉम्बोक्स में लोड किया जाएगा, और कॉन्फ़िगरेशन ऑब्जेक्ट में निर्दिष्ट स्थान के उन हिस्सों को चुना जाएगा।

डेटा प्रारूप

चूंकि नियंत्रण AJAX का उपयोग करके डेटा को पंप करता है, इसलिए सर्वर के साथ संचार के लिए प्रोटोकॉल पर "सहमत" होना आवश्यक है। एक कांटा है:

कॉम्बोक्स का उपयोग करते हुए स्थान के किसी एक हिस्से को चुनते समय, एक सरणी पर "काउंट" नियंत्रण के साथ मानों के साथ जोंस प्रारूप में अगले कॉम्बोक्स के लिए {पंक्तियों: [{आईडी: संख्यात्मक, नाम: स्ट्रिंग}, ...]} ;
जब स्थान पूरी तरह से लोड हो जाता है, तो नियंत्रण को जस प्रारूप में एक समय में अंतिम दो कॉम्बोक्स के लिए सरणियों की आवश्यकता होती है {पंक्तियाँ: {क्षेत्र: [{आईडी: संख्यात्मक, नाम: स्ट्रिंग}, ...], शहर: [{आईडी: संख्यात्मक, नाम: स्ट्रिंग} , ...]}} ।

टी। के बारे में। आप सर्वर भाग को केवल एक ही आवश्यकता के साथ लागू कर सकते हैं - ऊपर निर्दिष्ट प्रारूप का अनुपालन।

साधन

WebSVN: Ext.ux.locationSelect.js (ट्रंक / ux) </ a

SVN: Ext.ux.locationSelect.js (ट्रंक) UTF-8

ExtJS: स्थान चयन नियंत्रण

सार

आपको क्या चाहिए

कार्रवाई में नियंत्रण

संबंध

शो के लिए:

विन्यास और सृजन

यह करने के लिए महत्वपूर्ण है:

अगोचर के बारे में:

संपूर्ण स्थान डाउनलोड करें

डेटा प्रारूप

साधन

More articles: