javascript - ExtJS 4 ईवेंट हैंडलिंग की व्याख्या करें




event-handling extjs4 (5)

मैंने हाल ही में एक्स्टजेस सीखना शुरू कर दिया है, और घटनाओं को संभालने के तरीके को समझने में परेशानी है। मुझे एक्स्टजेस के पिछले संस्करणों का कोई अनुभव नहीं है।

विभिन्न मैनुअल, गाइड और दस्तावेज़ीकरण पृष्ठों को पढ़ने से, मैंने यह पता लगाया है कि इसका उपयोग कैसे किया जाए, लेकिन मैं इस बात पर स्पष्ट नहीं हूं कि यह कैसे काम करता है। मुझे ExtJS के पुराने संस्करणों के लिए कई ट्यूटोरियल मिले हैं, लेकिन मुझे यकीन नहीं है कि वे एक्स्टजेस 4 में कितने लागू हैं।

मैं विशेष रूप से चीजों पर "अंतिम शब्द" देख रहा हूं

  • इवेंट हैंडलिंग फ़ंक्शन किस तर्क से गुजरता है? क्या तर्कों का एक मानक सेट है जो हमेशा पास हो जाता है?
  • हम लिखने वाले कस्टम घटकों के लिए कस्टम इवेंट कैसे परिभाषित करें? हम इन कस्टम घटनाओं को कैसे आग लगा सकते हैं?
  • क्या रिटर्न वैल्यू (सत्य / झूठा) घटना को बुलबुले को प्रभावित करता है? यदि नहीं, तो हम ईवेंट हैंडलर के भीतर या बाहर से ईवेंट बुलबुले को कैसे नियंत्रित कर सकते हैं?
  • घटना श्रोताओं को पंजीकृत करने का एक मानक तरीका है? (अब मैं दो अलग-अलग तरीकों से आया हूं, और मुझे यकीन नहीं है कि प्रत्येक विधि का उपयोग क्यों किया गया था)।

उदाहरण के लिए, यह प्रश्न मुझे विश्वास दिलाता है कि एक ईवेंट हैंडलर कुछ तर्क प्राप्त कर सकता है। मैंने अन्य ट्यूटोरियल देखे हैं जहां हैंडलर के लिए केवल दो तर्क हैं। कौन सा शुल्क?


Answers

बस ऊपर दिए गए उत्कृष्ट उत्तरों में कुछ पेंस जोड़ना चाहते थे: यदि आप प्री एक्स्टजेस 4.1 पर काम कर रहे हैं, और एप्लिकेशन की विस्तृत घटनाएं नहीं हैं लेकिन उन्हें चाहिए, तो मैं एक बहुत ही सरल तकनीक का उपयोग कर रहा हूं जो मदद कर सकता है: एक बनाएं सरल वस्तु का निरीक्षण करने योग्य, और किसी भी ऐप चौड़ी घटनाओं को परिभाषित करें जिसमें आपको आवश्यकता हो सकती है। फिर आप उन घटनाओं को अपने ऐप में कहीं से भी निकाल सकते हैं, जिसमें वास्तविक एचटीएमएल डोम तत्व भी शामिल है और उस घटक से आवश्यक तत्वों को रिले करके किसी भी घटक से उन्हें सुन सकते हैं।

Ext.define('Lib.MessageBus', {
    extend: 'Ext.util.Observable',

    constructor: function() {
        this.addEvents(
            /*
             * describe the event
             */
                  "eventname"

            );
        this.callParent(arguments);
    }
});

फिर आप किसी भी अन्य घटक से कर सकते हैं:

 this.relayEvents(MesageBus, ['event1', 'event2'])

और किसी भी घटक या डोम तत्व से उन्हें आग:

 MessageBus.fireEvent('event1', somearg);

 <input type="button onclick="MessageBus.fireEvent('event2', 'somearg')">

फायरिंग आवेदन व्यापक घटनाओं

नियंत्रक कैसे एक दूसरे से बात करते हैं ...

उपर्युक्त महान उत्तर के अलावा मैं आवेदन व्यापक घटनाओं का उल्लेख करना चाहता हूं जो नियंत्रकों के बीच संचार सक्षम करने के लिए एक एमवीसी सेटअप में बहुत उपयोगी हो सकते हैं। (Extjs4.1)

आइए कहें कि हमारे पास एक चुनिंदा बॉक्स के साथ एक नियंत्रक स्टेशन (सेन्चा एमवीसी उदाहरण) है:

Ext.define('Pandora.controller.Station', {
    extend: 'Ext.app.Controller',
    ...

    init: function() {
        this.control({
            'stationslist': {
                selectionchange: this.onStationSelect
            },
            ...
        });
    },

    ...

    onStationSelect: function(selModel, selection) {
        this.application.fireEvent('stationstart', selection[0]);
    },    
   ...
});

जब चयन बॉक्स एक परिवर्तन घटना ट्रिगर करता है, तो फ़ंक्शन onStationSelect को निकाल दिया जाता है।

उस कार्य के भीतर हम देखते हैं:

this.application.fireEvent('stationstart', selection[0]);

यह एक अनुप्रयोग व्यापक घटना बनाता है और आग लगाता है जिसे हम किसी भी अन्य नियंत्रक से सुन सकते हैं।

इस प्रकार एक और नियंत्रक में अब हम जान सकते हैं कि स्टेशन का चयन बॉक्स कब बदला गया है। यह इस बात को सुनकर किया जाता है। this.application.on निम्नानुसार है:

Ext.define('Pandora.controller.Song', {
    extend: 'Ext.app.Controller', 
    ...
    init: function() {
        this.control({
            'recentlyplayedscroller': {
                selectionchange: this.onSongSelect
            }
        });

        // Listen for an application wide event
        this.application.on({
            stationstart: this.onStationStart, 
                scope: this
        });
    },
    ....
    onStationStart: function(station) {
        console.info('I called to inform you that the Station controller select box just has been changed');
        console.info('Now what do you want to do next?');
    },
}

अगर चयन onStationStart बदल दिया गया है तो अब हम नियंत्रक Song में onStationStart पर फ़ंक्शन को भी आग onStationStart हैं ...

सेन्चा दस्तावेज़ों से:

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

मेरे मामले में: ग्रिड पैनल में डेटा अपडेट करने के लिए पेड़ नोड पर क्लिक करना।

2016 को टिप्पणियों से @ gm2008 के लिए धन्यवाद 2016 अपडेट करें:

फायरिंग एप्लिकेशन-व्यापी कस्टम इवेंट्स के मामले में, ExtJS V5.1 प्रकाशित होने के बाद अब एक नई विधि है, जो Ext.GlobalEvents का उपयोग कर Ext.GlobalEvents

जब आप घटनाओं को आग Ext.GlobalEvents.fireEvent('custom_event'); , तो आप कॉल कर सकते हैं: Ext.GlobalEvents.fireEvent('custom_event');

जब आप ईवेंट के हैंडलर को पंजीकृत करते हैं, तो आप कॉल करते हैं: Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);

यह विधि नियंत्रकों तक ही सीमित नहीं है। कोई भी घटक घटक ऑब्जेक्ट को इनपुट पैरामीटर स्कोप के रूप में डालने के माध्यम से एक कस्टम ईवेंट को संभाल सकता है।

सेन्चा डॉक्स में मिला: एमवीसी भाग 2


केवल दो और चीजें जिन्हें मुझे जानने में मदद मिली, भले ही वे सवाल का हिस्सा न हों, वास्तव में।

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

दूसरी तरफ, यानी mycmp घटक mycmp द्वारा प्राप्त उप-घटकों में से किसी एक को प्राप्त करने वाली घटनाओं पर subcmp , इस तरह किया जा सकता है

mycmp.on('show' function (mycmp, eOpts)
{
   mycmp.subcmp.fireEvent('show', mycmp.subcmp, eOpts);
});

आइए डीओएम तत्वों के ईवेंट हैंडलिंग का वर्णन करके शुरू करें।

डोम नोड घटना हैंडलिंग

सबसे पहले आप सीधे डोम नोड के साथ काम नहीं करना चाहेंगे। इसके बजाय आप शायद Ext.Element इंटरफ़ेस का उपयोग करना चाहेंगे। इवेंट हैंडलर को असाइन करने के उद्देश्य से, Element.addListener और Element.on (ये समकक्ष हैं) बनाए गए थे। तो, उदाहरण के लिए, अगर हमारे पास एचटीएमएल है:

<div id="test_node"></div>

और हम click इवेंट हैंडलर जोड़ना चाहते हैं।
आइए Element पुनः प्राप्त करें:

var el = Ext.get('test_node');

अब चलो click घटना के लिए दस्तावेज़ों की जांच click । यह हैंडलर में तीन पैरामीटर हो सकते हैं:

क्लिक करें (Ext.EventObject ई, HTMLElement टी, ऑब्जेक्ट eOpts)

इन सभी चीजों को जानना हम हैंडलर असाइन कर सकते हैं:

//       event name      event handler
el.on(    'click'        , function(e, t, eOpts){
  // handling event here
});

विजेट घटना प्रबंधन

विजेट इवेंट हैंडलिंग डीओएम नोड्स इवेंट हैंडलिंग के समान ही है।

सबसे पहले, विगेट्स इवेंट हैंडलिंग को Ext.util.Observable mixin का उपयोग करके महसूस किया जाता है। घटनाओं को सही तरीके से संभालने के लिए आपके विजेट को एक Ext.util.Observable रूप में Ext.util.Observable को containg करना चाहिए। सभी अंतर्निर्मित विजेट (जैसे पैनल, फॉर्म, ट्री, ग्रिड, ...) में Ext.util.Observable डिफ़ॉल्ट रूप से एक Ext.util.Observable रूप में है।

विगेट्स के लिए हैंडलर असाइन करने के दो तरीके हैं। पहला - विधि (या addListener ) on उपयोग on । उदाहरण के लिए Button विजेट बनाएं और इसे click ईवेंट को असाइन click । सबसे पहले आपको हैंडलर के तर्कों के लिए ईवेंट के दस्तावेज़ों की जांच करनी चाहिए:

क्लिक करें (Ext.button.Button यह, घटना ई, ऑब्जेक्ट eOpts)

अब चलिए इसका उपयोग on :

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button'
});
myButton.on('click', function(btn, e, eOpts) {
  // event handling here
  console.log(btn, e, eOpts);
});

दूसरा तरीका विजेट के listeners कॉन्फ़िगरेशन का उपयोग करना है:

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button',
  listeners : {
    click: function(btn, e, eOpts) {
      // event handling here
      console.log(btn, e, eOpts);
    }
  }
});

ध्यान दें कि Button विजेट एक विशेष प्रकार का विजेट है। handler कॉन्फ़िगरेशन का उपयोग कर इस विजेट को ईवेंट को असाइन किया जा सकता है:

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button',
  handler : function(btn, e, eOpts) {
    // event handling here
    console.log(btn, e, eOpts);
  }
});

कस्टम घटनाओं फायरिंग

सबसे पहले आपको addEvents विधि का उपयोग करके एक ईवेंट पंजीकृत करने की आवश्यकता है:

myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);

addEvents विधि का उपयोग वैकल्पिक है। चूंकि इस विधि की टिप्पणियों का कहना है कि इस विधि का उपयोग करने की कोई आवश्यकता नहीं है लेकिन यह घटनाओं के दस्तावेज के लिए जगह प्रदान करता है।

अपने ईवेंट का उपयोग करने के लिए fireEvent विधि का उपयोग करें:

myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);

arg1, arg2, arg3, /* ... */ हैंडलर में पारित किया जाएगा। अब हम आपके आयोजन को संभाल सकते हैं:

myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
  // event handling here
  console.log(arg1, arg2, arg3, /* ... */);
});

यह उल्लेखनीय है कि addEvents विधि कॉल डालने के लिए सबसे अच्छी जगह विजेट की initComponent विधि है जब आप नए विजेट को परिभाषित कर रहे हैं:

Ext.define('MyCustomButton', {
  extend: 'Ext.button.Button',
  // ... other configs,
  initComponent: function(){
    this.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
    // ...
    this.callParent(arguments);
  }
});
var myButton = Ext.create('MyCustomButton', { /* configs */ });

घटना बुलबुले को रोकना

Ext.EventObject.preventDefault() को रोकने के लिए आप return false कर सकते return false या Ext.EventObject.preventDefault() उपयोग कर सकते return false । ब्राउज़र के डिफ़ॉल्ट क्रिया उपयोग को रोकने के लिए Ext.EventObject.stopPropagation()

उदाहरण के लिए चलिए अपने बटन पर क्लिक इवेंट हैंडलर असाइन करें। और यदि बाएं बटन को क्लिक नहीं किया गया था तो डिफ़ॉल्ट ब्राउज़र कार्रवाई को रोकें:

myButton.on('click', function(btn, e){
  if (e.button !== 0)
    e.preventDefault();
});

मैं इस मुद्दे में भाग गया क्योंकि मैं मैन्युअल रूप से Visual Studio के बाहर इनमें से कोई भी उपकरण स्थापित करता हूं। लेकिन कई ओपन सोर्स कमांड लाइन टूल के साथ विजुअल स्टूडियो जहाज आधुनिक वेब डेवलपमेंट वर्कफ्लो में उपयोग किए जाते हैं। यहां बताया गया है कि आप विज़ुअल स्टूडियो को उसी संस्करण का उपयोग करने के लिए कह सकते हैं जिसे आपने मैन्युअल रूप से इंस्टॉल किया है

टूल्स -> ऑप्शन्स -> प्रोजेक्ट्स एंड सॉल्यूशंस -> एक्सटर्नल वेब टूल्स पर जाएं

  • आंतरिक पथ से पहले वैश्विक PATH पर्यावरण चर सेट करें, आप क्रम बदलने के लिए शीर्ष-दाईं ओर तीर का उपयोग कर सकते हैं।

या

  • सबसे पहले, आपके पास पहले से मौजूद Node.js इंस्टॉलेशन और कमांड लाइन पर उपयोग करें। डिफ़ॉल्ट रूप से, Node.js 0.12.7 "C: \ Program Files \ नोडज" को स्थापित करता है। Visual Studio को इसके बजाय उस संस्करण का उपयोग करने के लिए मजबूर करने के लिए नोड.जेएस निर्देशिका के पथ के शीर्ष पर इस प्रविष्टि को जोड़ें




javascript extjs event-handling extjs4