Ext JS 4 इंटरफ़ेस के भाग के रूप में Ext JS 4 विजेट्स का उपयोग करना

प्रस्तावना

एक्सट जेएस 4 डेवलपर्स को कई नई विशेषताओं के साथ प्रस्तुत करता है, जिसमें उदाहरण के लिए, बड़ी संख्या में नए रेखांकन और चार्ट शामिल हैं। तुलना करें - चौथे संस्करण के लिए तीसरे संस्करण के लिए केवल चार उदाहरणों के मुकाबले चार्ट तत्वों का उपयोग करने के 22 उदाहरण हैं। प्रभावशाली, है ना?

हालांकि, क्या होगा यदि कोई बड़ा एप्लिकेशन उपलब्ध है जो एक्सट जेएस के तीसरे संस्करण पर लागू किया गया है और चौथे संस्करण के कुछ विजेट का उपयोग करने की आवश्यकता है? उदाहरण के लिए, एक विशिष्ट स्थिति तब होती है जब आपको एप्लिकेशन में नए आरेख जोड़ने की आवश्यकता होती है, लेकिन "चार" में सब कुछ फिर से लिखना व्यावहारिक नहीं है।

सौभाग्य से, ढांचे के डेवलपर्स ने इसका ध्यान रखा। एक्सट जेएस 4 पूरी तरह से अलग है, जो आपको चौथे संस्करण के साथ-साथ एक ही पृष्ठ के भीतर चौथे संस्करण का उपयोग करने की अनुमति देता है! इस विशेषता को एक लड़ाकू उदाहरण में प्रदर्शित करने के लिए, फ्रेमवर्क के लेखकों ने एक उदाहरण बनाया जो चौथा संस्करण के नए आरेख को जेएस 3 एप्लीकेशन में जोड़ता है। तो इसके लिए क्या आवश्यक है?

कैसे करें?

सबसे पहले, आपको तथाकथित सैंडबॉक्स (सैंडबॉक्स) एक्सट जेएस 4 को एचटीएमएल पेज से कनेक्ट करना होगा, जिसमें सीएसएस और जेएस फाइल शामिल हैं: एक्सट- सैंडबॉक्स।एक्सएस और एक्सट-ऑल- सैंडबॉक्स बॉक्स। जेएस। कृपया ध्यान दें कि ढांचे के तीसरे संस्करण को जोड़ने के बाद आपको सैंडबॉक्स को कनेक्ट करना होगा।

दूसरे, आवरण Ext.onReady (...) को Ext4.onReady (...) द्वारा प्रतिस्थापित किया जाना चाहिए। यह आपको तीसरे संस्करण के आवेदन के हिस्से के रूप में चौथे एक्सट जेएस की नई सुविधाओं का उपयोग करने की अनुमति देगा।

तीसरे, नए विजेट के लिए, आपको नए स्टोर रिपॉजिटरी का उपयोग करने की आवश्यकता है। उदाहरण के लिए, ArrayStore इस तरह दिखता है:

myStore = Ext4.create('store.array', { idIndex: 0, fields: [ 'id', 'company', 'money', ], data: [ [ 1, ' "  "', 100000 ], [ 2, ' ', 12000 ], [ 3, ' "  "', 45000 ] ] }); 

और अंत में, चौथा, नए विगेट्स बनाते समय, Ext.blablabla के बजाय Ext4.blablabla लिखना न भूलें।

मुझे एक उदाहरण चाहिए!

उदाहरण के रूप में, Ext JS के चौथे संस्करण का आरेख पुराने Ext JS 3 पृष्ठ में डालें। HTML डॉक्यूमेंट बनाएं, एक्सटेड जेएस के तीसरे संस्करण और ऊपर उल्लिखित दो एक्सट जेएस 4 सैंडबॉक्स फाइलें शामिल करें। फिर चलो हमारे हाइब्रिड एप्लिकेशन को लिखें - इसका कोड नीचे है।

 // Ext4.onReady(...),  Ext.onReady(...) Ext4.onReady(function(){ //  ,  //   Grid (Ext JS 3)  Chart (Ext JS 4) var companiesStoreConfig = { idIndex: 0, fields: [ 'id', 'company', 'money' ], data: [ [ 1, ' "  "', 51000 ], [ 2, ' ', 12000 ], [ 3, ' "  "', 43000 ], [ 4, ' " "', 31000 ], [ 5, ' " "', 9000 ] ] }; //   -     Ext4, //       //  ,   .    //     -   Ext. var companiesStore = new Ext4.data.ArrayStore(companiesStoreConfig); //   (Ext JS 3) var grid = new Ext.grid.GridPanel({ store: companiesStore, //    columns: [ //   { id :'company', header : '', sortable : true, dataIndex: 'company' }, { header : '', width : 70, sortable : true, dataIndex: 'money' } ], renderTo: 'gridDiv', autoExpandColumn: 'company', width: 350, autoHeight: true, border: false, frame: false, title: '' }); //   (Ext JS 4) var chart = Ext4.createWidget('panel', { width: 795, height: 440, renderTo: 'chartDiv', border: false, frame: false, layout: 'fit', items: [{ xtype: 'chart', store: companiesStore, legend: { field: 'company', position: 'right' }, theme: 'Base:gradients', series: [{ type: 'pie', donut: 35, field: 'money', showInLegend: true, label: { field: 'company', display: 'rotate', contrast: true, font: '12px Arial', renderer: function(v){ return ''; } } }] }] }); }); 

उपरोक्त कोड Ext JS 3 का उपयोग करके एक तालिका बनाएगा और Ext JS 4 का उपयोग कर एक चार्ट। इस तथ्य पर ध्यान दें कि चौथा संस्करण फ्रेमवर्क के लिए विजेट बनाते समय, केवल चौथे संस्करण के घटकों का उपयोग इसके विवरण में किया जा सकता है। उदाहरण के लिए, उपरोक्त उदाहरण में, आप नहीं लिख सकते

 { ... renderTo: Ext.getBody() ... } 

लेकिन आप कर सकते हैं:

 { ... renderTo: Ext4.getBody() ... } 

इन नियमों का पालन करें - यह आपको मौजूदा एक्सट जेएस 3 एप्लिकेशन के भीतर नई एक्सट जेएस 4 कार्यक्षमता का उपयोग करने की अनुमति देगा।

प्रयुक्त सामग्री:

1. एक्सटेंडेड JS 4: काउंटडाउन प्रीव्यू
2. जेएस 4 एपीआई दस्तावेज़ीकरण
3. जेएस 3 एपीआई दस्तावेज़ीकरण