Ext.js - कस्टम ईवेंट और श्रोता

घटनाएँ कुछ ऐसी होती हैं जो कक्षा में कुछ होने पर निकाल दी जाती हैं। उदाहरण के लिए, जब एक बटन क्लिक किया जा रहा है या तत्व से पहले / बाद में प्रदान किया गया है।

लेखन घटनाओं के तरीके

श्रोताओं का उपयोग करके अंतर्निहित ईवेंट
घटनाओं को बाद में संलग्न करना
कस्टम ईवेंट

श्रोताओं का उपयोग करके निर्मित ईवेंट

एक्सट जेएस एक्सट्रीम जेएस फाइलों में घटनाओं और कस्टम घटनाओं को लिखने के लिए श्रोता संपत्ति प्रदान करता है।

Writing listener in Ext JS

हम पैनल में एक सुनने की संपत्ति जोड़कर श्रोता को पिछले कार्यक्रम में जोड़ देंगे।

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button is clicked');	
                  }
               }
            });
         });
      </script> 
   </head>
   
   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

उपरोक्त कार्यक्रम निम्नलिखित परिणाम का उत्पादन करेगा -

इस तरह हम श्रोताओं की संपत्ति में कई घटनाओं को भी लिख सकते हैं।

Multiple Events in the Same Listener

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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.get('tag2').hide()
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  click: function() {
                     this.hide();
                  },
                  hide: function() {
                     Ext.get('tag1').hide();
                     Ext.get('tag2').show();
                  }
               }
            });
         });           
      </script> 
   </head>
   
   <body>
      <div id = "tag1">Please click the button to see event listener.</div>
      <div id = "tag2">The button was clicked and now it is hidden.</div>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

बाद में एक कार्यक्रम में भाग लेना

घटनाओं को लिखने की पिछली विधि में, हमने तत्वों को बनाने के समय श्रोताओं में घटनाओं को लिखा है। दूसरा तरीका घटनाओं को संलग्न करना है।

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button'
            });

            // This way we can attach event to the button after the button is created.
            button.on('click', function() {
               Ext.MessageBox.alert('Alert box', 'Button is clicked');
            });
         });
      </script> 
   </head>
   
   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

उपरोक्त कार्यक्रम निम्नलिखित परिणाम का उत्पादन करेगा -

कस्टम ईवेंट

हम एक्सट जेएस में कस्टम ईवेंट लिख सकते हैं और ईवेंट को फायरवेंट विधि से आग लगा सकते हैं। निम्नलिखित उदाहरण बताते हैं कि कैसे कस्टम घटनाओं को लिखना है।

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  myEvent: function(button) {
                     Ext.MessageBox.alert('Alert box', 'My custom event is called');
                  }
               }
            });
            Ext.defer(function() {
               button.fireEvent('myEvent');
            }, 5000);
         }); 
      </script> 
   </head>
   
   <body>
      <p> The event will be called after 5 seconds when the page is loaded. </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

एक बार जब पृष्ठ लोड हो जाता है और दस्तावेज़ तैयार हो जाता है, तो एक बटन वाला UI पृष्ठ दिखाई देगा और जैसा कि हम 5 सेकंड के बाद किसी घटना को निकाल रहे हैं, दस्तावेज़ तैयार है। अलर्ट बॉक्स 5 सेकंड के बाद दिखाई देगा।

यहाँ, हमने कस्टम इवेंट 'myEvent' लिखा है और हम घटनाओं को बटन के रूप में फायर कर रहे हैं ।fireEvent (eventName);