एक्सटीजेएस 4 ईवेंट हैंडलिंग के बारे में बताएं

Question

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

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

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

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

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

Comments

बस ध्यान दिया ... बंद विषय?

— jrharshath

88 प्रश्न पर अपवोट, पहले उत्तर पर 155 अपवोट और महान और पराक्रमी एंड्रयू यह एक विषय से दूर है। गंभीर बिजली यात्रा चल रही है!

— बोटकोडर

मैंने इस प्रश्न को फिर से खोलने के लिए मतदान किया है क्योंकि यहाँ उत्तर एक सोने की खान हैं। मैंने प्रश्न को क्यू और ए शैली में बेहतर फिट करने के लिए संपादित किया है।

— dbrin

कृपया इस प्रश्न को फिर से खोलें 'क्योंकि यह वास्तव में सहायक और वास्तविक प्रश्न है। इसलिए आँख बंद करके हम इसे बंद नहीं कर सकते।

— पीयूष ढोलरिया

यह एक अच्छा शब्द है और मैं इसे बंद करने का कोई कारण नहीं देखता। इस बंद विषय को कॉल करना हास्यास्पद है। फिर से खोलने के लिए वोट दिया गया।

— माइक फुच्स

Answer 1

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

डोम नोड घटना से निपटने

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

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

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

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

अब आइए clickघटना के लिए डॉक्स देखें । यह हैंडलर के तीन पैरामीटर हो सकते हैं:

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

यह सब सामान जानकर हम हैंडलर असाइन कर सकते हैं:

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

विजेट इवेंट हैंडलिंग

विजेट ईवेंट हैंडलिंग, डोम नोड ईवेंट हैंडलिंग के समान है।

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

विजेट के लिए हैंडलर असाइन करने के दो तरीके हैं। पहले एक - विधि (या ) पर उपयोग करना हैaddListener । उदाहरण के लिए, Buttonविजेट बनाएं और 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);
});

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

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विधि का उपयोग वैकल्पिक है। जैसा कि इस पद्धति की टिप्पणियां कहती हैं कि इस पद्धति का उपयोग करने की कोई आवश्यकता नहीं है, लेकिन यह घटनाओं के प्रलेखन के लिए जगह प्रदान करती है।

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

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 */ });

ईवेंट को रोकना

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

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

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

Comments

यह, लालच है, लेकिन क्या कुछ कॉन्फ़िगरेशन के माध्यम से "addEvents" बात करने का कोई तरीका है? :)

— jrharshath

@jrharshath, जहाँ तक मुझे पता है, दुर्भाग्य से, विन्यास के माध्यम से ऐसा करने का कोई तरीका नहीं है।

— आणविक मैन

कैसे कोई इन्हें बनाता है -'Myspecialevent1 ', मुझे लगता है कि आपने इसे संलग्न किया है और इसे संभाला है लेकिन हम इन्हें कैसे बनाते हैं?

— हेयॉन

शानदार जवाब! मैं एक्सटीजे के लिए नया हूं और पेज में किसी भी तत्व को संदर्भित करने और उन पर ईवेंट हैंडलर का उपयोग करने के लिए एक तरीका ढूंढ रहा था, जैसे कि jQuery। आपने मुझे सिखाया! धन्यवाद!

— रुटविक गंगुरडे

अनुभाग में छोटी सी त्रुटि "घटना को रोकना"। stopPropagation का उपयोग ईवेंट बबलिंग को रोकने के लिए किया जाता है, और डिफ़ॉल्ट व्यवहार / कार्रवाई को रोकने के लिए preventDefault का उपयोग किया जाता है।

— MatRt

Answer 2

फायरिंग आवेदन विस्तृत घटनाओं

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

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

चलो कहते हैं कि हमारे पास एक चुनिंदा बॉक्स के साथ एक नियंत्रक स्टेशन (Sencha MVC उदाहरण) है:

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भी आग ...

सांचा डॉक्स से:

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

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

अपडेट 2016 धन्यवाद @ gm2008 नीचे टिप्पणी से:

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

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

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

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

स्नेखा डॉक्स में पाया गया: एमवीसी पार्ट 2

Comments

अनुप्रयोग-व्यापी कस्टम ईवेंट्स को फायर करने के संदर्भ में, अब एक नई विधि है, जिसके बाद ExtJS V5.1 प्रकाशित किया गया है, जो Ext.GlobalEvents का उपयोग कर रहा है। जब आप आग की घटना करते हैं, तो आप कॉल Ext.GlobalEvents.fireEvent('custom_event');करते हैं जब आप घटना के एक हैंडलर को पंजीकृत करते हैं, तो आप कहते हैं कि Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope};यहां एक बेला है । यह विधि नियंत्रकों तक सीमित नहीं है। कोई भी घटक इनपुट ऑब्जेक्ट के रूप में घटक ऑब्जेक्ट को डालकर एक कस्टम इवेंट को संभाल सकता है scope। सवाल फिर से खोलना चाहिए।

— gm2008

Answer 3

नियंत्रक घटना श्रोताओं के लिए एक और चाल।

आप किसी भी घटक से ईवेंट देखने के लिए वाइल्डकार्ड का उपयोग कर सकते हैं:

this.control({
   '*':{ 
       myCustomEvent: this.doSomething
   }
});

Answer 4

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

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')">

Comments

बस जानकारी के लिए, यह। ईडीवी को एक्सटी जेएस 5.0 से शुरू किया गया है। इसलिए अब घटनाओं को जोड़ने की आवश्यकता नहीं है

— अजय शर्मा

Answer 5

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

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

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

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