Ext.js - पहला कार्यक्रम

यह अध्याय एक्सट जेएस में पहला हैलो वर्ल्ड प्रोग्राम लिखने के चरणों को सूचीबद्ध करता है।

चरण 1

हमारी पसंद के संपादक में एक index.htm पेज बनाएँ। HTML पेज के हेड सेक्शन में आवश्यक लाइब्रेरी फाइल्स को इस प्रकार शामिल करें।

index.htm

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "helloWorldPanel" />
   </body>
</html>

व्याख्या

Ext.onReady () मेथड को एक्सटैस्ट जेएस एलीमेंट्स को रेंडर करने के लिए तैयार होने के बाद कहा जाएगा।
Ext। जेसी में ऑब्जेक्ट बनाने के लिए Ext.create () विधि का उपयोग किया जाता है। यहां हम साधारण पैनल क्लास Ext.Panel का ऑब्जेक्ट बना रहे हैं।
Ext.Panel एक पैनल बनाने के लिए Ext JS में पूर्वनिर्धारित वर्ग है।
हर एक्सट जेएस वर्ग में कुछ बुनियादी कार्य करने के लिए अलग-अलग गुण होते हैं।

Ext.Panel वर्ग में विभिन्न गुण होते हैं जैसे -

renderToवह तत्व है जहाँ इस पैनल को रेंडर करना है। 'helloWorldPanel' index.html फ़ाइल में div id है।
Height तथा width गुण पैनल के आकार को अनुकूलित करने के लिए हैं।
Title संपत्ति पैनल को शीर्षक प्रदान करना है।
Html संपत्ति HTML सामग्री है जिसे पैनल में दिखाया जाना है।

चरण 2

एक मानक ब्राउज़र में index.htm फ़ाइल खोलें और आपको ब्राउज़र पर निम्न आउटपुट मिलेगा।