extjs ट्यूटोरियल
एक्जिट्स के साथ शुरुआत करना

टिप्पणियों

संस्करण

एक हैलो वर्ल्ड एप्लीकेशन बनाना - Via Sencha Cmd

यह उदाहरण प्रक्रिया को बूटस्ट्रैप करने के लिए स्नेचा सीएमडी का उपयोग करके एक्सटीजेएस में एक मूल एप्लिकेशन बनाने का प्रदर्शन करता है - यह विधि स्वचालित रूप से परियोजना के लिए कुछ कोड और एक कंकाल संरचना उत्पन्न करेगी।

एक कंसोल विंडो खोलें और कार्य निर्देशिका को एक उपयुक्त स्थान पर बदलें जिसमें काम करना है। एक ही विंडो और डायरेक्टरी में नया एप्लिकेशन जेनरेट करने के लिए निम्न कमांड चलाते हैं।

> sencha -sdk /path/to/ext-sdk generate app HelloWorld  ./HelloWorld 

नोट: -sdk ध्वज फ्रेमवर्क संग्रह से निकाले गए निर्देशिका के स्थान को निर्दिष्ट करता है।

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

> sencha -sdk /path/to/ext-sdk generate app -classic HelloWorld ./HelloWorld 

किसी भी अन्य कॉन्फ़िगरेशन के बिना, एक पूरी तरह कार्यात्मक डेमो एप्लिकेशन को अब स्थानीय निर्देशिका में रहना चाहिए। अब वर्किंग डायरेक्टरी को नई HelloWorld प्रोजेक्ट डायरेक्टरी में बदलें और रन करें:

> sencha app watch

ऐसा करने से, प्रोजेक्ट डिफ़ॉल्ट बिल्ड प्रोफ़ाइल का उपयोग करके संकलित किया जाता है और एक सरल HTTP सर्वर शुरू किया जाता है, जो वेब ब्राउज़र के माध्यम से स्थानीय रूप से एप्लिकेशन को देखने की अनुमति देता है। डिफ़ॉल्ट रूप से 1841 पोर्ट पर।

स्थापना और सेटअप

एक्सटीजेएस का विशिष्ट उपयोग एकल-पृष्ठ समृद्ध-अनुप्रयोगों (आरआईए) के निर्माण के लिए रूपरेखा का लाभ उठाता है। आरंभ करने का सबसे सरल तरीका, मुख्य रूप से तैनाती जीवन-चक्र में सामान्य चिंताओं को कवर करने वाला एक सीएलआई बिल्ड टूल, सेंधा सीएमडी का उपयोग करना है:

• पैकेज और निर्भरता प्रबंधन
• कोड संकलन / बंडल और खनन
• विभिन्न लक्ष्यों और प्लेटफार्मों के लिए निर्माण रणनीतियों का प्रबंधन

» सांचा सीएमडी डाउनलोड करें

दूसरा चरण एसडीके डाउनलोड करना है, एक्सटीजेएस एक वाणिज्यिक उत्पाद है - प्रतिलिपि प्राप्त करने के लिए, इनमें से एक:

• व्यावसायिक रूप से लाइसेंस संस्करण ( उत्पाद पृष्ठ ) के लिए स्नेचा समर्थन में प्रवेश करें
• एक मूल्यांकन प्रति के लिए आवेदन करें जो 30 दिनों के लिए मान्य होगी
• ओपन-सोर्स प्रोजेक्ट्स के लिए उपलब्ध GPL v3 संस्करण का अनुरोध करें
  (ध्यान दें कि आप इस विकल्प के साथ नवीनतम संस्करण का उपयोग करने में सक्षम नहीं हो सकते हैं)

एसडीके डाउनलोड करने के बाद सुनिश्चित करें कि आगे बढ़ने से पहले संग्रह को निकाला जाता है।

नोट : एक्सटजेएस परियोजनाओं के लिए एक व्यापक मार्गदर्शिका के लिए आधिकारिक आरंभ करना प्रलेखन देखें।

स्नेचा सीएमडी को स्थापित करने के बाद, यह एक कंसोल विंडो खोलकर और चलाकर उपलब्धता को सत्यापित किया जा सकता है:

> sencha help

अब हमारे पास ExtJS एप्लिकेशन बनाने और तैनात करने के लिए आवश्यक उपकरण हैं, निर्देशिका स्थान पर ध्यान दें जहां एसडीके को निकाला गया था क्योंकि आगे के उदाहरणों में इसकी आवश्यकता होगी।

हैलो वर्ल्ड एप्लीकेशन बनाना - मैन्युअल रूप से

चलो एक सरल वेब एप्लिकेशन बनाने के लिए एक्सटीजेएस का उपयोग करना शुरू करते हैं।

हम एक साधारण वेब एप्लिकेशन बनाएंगे जिसमें केवल एक भौतिक पृष्ठ (aspx / html) होगा। कम से कम, प्रत्येक एक्सटीजेएस एप्लिकेशन में एक HTML और एक जावास्क्रिप्ट फ़ाइल होगी - आमतौर पर index.html और app.js.

फ़ाइल इंडेक्स। Html या आपके डिफॉल्ट पेज में आपके ऐप के साथ कोड के एक्स्टजेएस के सीएसएस और जावास्क्रिप्ट कोड के संदर्भ शामिल होंगे। आपके आवेदन के लिए कोड युक्त फ़ाइल (मूल रूप से आपके वेब एप्लिकेशन का शुरुआती बिंदु)।

आइए एक सरल वेब एप्लिकेशन बनाएं जो एक्सटीजेएस लाइब्रेरी घटकों का उपयोग करेगा:

चरण 1: एक खाली वेब एप्लिकेशन बनाएं

जैसा कि स्क्रीनशॉट में दिखाया गया है, मैंने एक खाली वेब एप्लिकेशन बनाया है। इसे सरल बनाने के लिए, आप अपनी पसंद के संपादक या आईडीई में किसी भी वेब एप्लिकेशन प्रोजेक्ट का उपयोग कर सकते हैं।

चरण 2: एक डिफ़ॉल्ट वेब पेज जोड़ें

यदि आपने एक खाली वेब एप्लिकेशन बनाया है, तो हमें एक वेब पेज शामिल करने की आवश्यकता है जो हमारे आवेदन का शुरुआती पृष्ठ होगा।

चरण 3: Default.aspx में Ext Js References जोड़ें

यह चरण दिखाता है कि हम extJS लाइब्रेरी का उपयोग कैसे करते हैं। जैसा कि Default.aspx में स्क्रीनशॉट में दिखाया गया है, मैंने सिर्फ 3 फाइलें बताई हैं:

• ext-all.js
• ext-all.css
• app.js

स्नेचा ने एक्सटीजेएस फ्रेमवर्क के लिए मुफ्त सीडीएन होस्टिंग प्रदान करने के लिए, वैश्विक सामग्री नेटवर्क कैचेफ़ली के साथ भागीदारी की है। इस नमूने में मैंने एक्सट की सीडीएन लाइब्रेरी का उपयोग किया है, हालाँकि हम अपनी परियोजना निर्देशिका से एक ही फाइल (ext-all.js & ext-all.css) का उपयोग कर सकते हैं या सीडीएन अनुपलब्ध होने की स्थिति में बैकअप के रूप में।

App.js का हवाला देकर, इसे ब्राउज़र में लोड किया जाएगा और यह हमारे आवेदन के लिए शुरुआती बिंदु होगा।

इन फ़ाइलों के अलावा, हमारे पास एक प्लेसहोल्डर है जहां UI का प्रतिपादन किया जाएगा। इस नमूने में, हमारे पास आईडी "व्हाट्सएप" के साथ एक div है जिसे हम बाद में यूआई प्रदान करने के लिए उपयोग करेंगे।

<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> 

<link rel="stylesheet" type="text/css" 

href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>

<script src="app/app.js"></script> 

चरण 4: अपने वेब प्रोजेक्ट में ऐप फ़ोल्डर और app.js जोड़ें

ExtJS हमें MVC पैटर्न में कोड को प्रबंधित करने का एक तरीका प्रदान करता है। जैसा कि स्क्रीनशॉट में दिखाया गया है, हमारे पास हमारे एक्सटज एप्लिकेशन के लिए एक कंटेनर फ़ोल्डर है, इस मामले में 'ऐप'। यह फ़ोल्डर हमारे सभी एप्लिकेशन कोड को विभिन्न फ़ोल्डरों में विभाजित करेगा, अर्थात, मॉडल, व्यू, कंट्रोलर, स्टोर, आदि। वर्तमान में, इसमें केवल app.js फ़ाइल है।

चरण 5: अपना कोड app.js में लिखें

App.js हमारे आवेदन का प्रारंभिक बिंदु है; इस नमूने के लिए मैंने एप्लिकेशन लॉन्च करने के लिए आवश्यक न्यूनतम कॉन्फ़िगरेशन का उपयोग किया है।

Ext.application एक ExtJS एप्लिकेशन का प्रतिनिधित्व करता है जो कई चीजें करता है। यह नाम विन्यास में प्रदान किया गया एक वैश्विक चर ' SenchaApp ' बनाता है और सभी अनुप्रयोग वर्ग (मॉडल, विचार, नियंत्रक, भंडार) एकल नामस्थान में निवास करेंगे। लॉन्च एक ऐसा फ़ंक्शन है जिसे सभी एप्लिकेशन तैयार होने पर स्वचालित रूप से कहा जाता है (सभी कक्षाएं ठीक से लोड की जाती हैं)।

इस नमूने में, हम कुछ कॉन्फ़िगरेशन के साथ एक पैनल बना रहे हैं और इसे उस प्लेसहोल्डर पर रेंडर कर रहे हैं जिसे हमने Default.aspx में प्रदान किया था ।

Ext.application({
    name: 'SenchaApp',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Sencha App',
            width: 300,
            height: 300,
            bodyPadding:10,
            renderTo: 'whitespace',
            html:'Hello World'
        });
    }
});

आउटपुट स्क्रीनशॉट

जब आप इस वेब एप्लिकेशन को एक स्टार्टअप पृष्ठ के रूप में Default.aspx के साथ चलाते हैं, तो ब्राउज़र में निम्न विंडो दिखाई देगी।