ExtJS 4 ইভেন্ট হ্যান্ডলিং ব্যাখ্যা করুন

Question

আমি সম্প্রতি এক্সটিজেএস শিখতে শুরু করেছি এবং কীভাবে ইভেন্টগুলি পরিচালনা করতে হয় তা বুঝতে সমস্যা হয়। ExtJS- র পূর্ববর্তী কোনও সংস্করণের অভিজ্ঞতা আমার নেই।

বিভিন্ন ম্যানুয়াল, গাইড এবং ডকুমেন্টেশন পৃষ্ঠাগুলি পড়া থেকে, আমি কীভাবে এটি ব্যবহার করব তা অনুধাবন করেছি, তবে এটি কীভাবে কাজ করে তা সম্পর্কে আমি পরিষ্কার নই। এক্সট্রাএস-এর পুরানো সংস্করণগুলির জন্য আমি বেশ কয়েকটি টিউটোরিয়াল পেয়েছি, তবে আমি এক্সটجيএস 4-তে এগুলি কতটা প্রযোজ্য তা নিশ্চিত নই।

আমি বিশেষভাবে "চূড়ান্ত শব্দ" এর মতো জিনিসগুলির দিকে তাকিয়ে আছি

• কোন ইভেন্ট হ্যান্ডলিংয়ের ক্রিয়াকলাপটি কী পাস হবে? সবসময় উত্তীর্ণ হয় এমন আরগগুলির একটি মানক সেট আছে?
• আমরা লিখি কাস্টম উপাদানগুলির জন্য কাস্টম ইভেন্টগুলি কীভাবে সংজ্ঞায়িত করব? কীভাবে আমরা এই কাস্টম ইভেন্টটি ফায়ার করতে পারি?
• রিটার্ন মান (সত্য / মিথ্যা) কীভাবে ইভেন্ট বুদবুদগুলিকে প্রভাবিত করে? যদি তা না হয় তবে কীভাবে আমরা ইভেন্ট হ্যান্ডলারের মধ্যে বা বাইরে থেকে ইভেন্ট বুদবুদকে নিয়ন্ত্রণ করতে পারি?
• ইভেন্ট শ্রোতাদের নিবন্ধনের জন্য কি কোনও স্ট্যান্ডার্ড উপায় আছে? (আমি এখন পর্যন্ত দুটি ভিন্ন উপায়ে এসেছি এবং প্রতিটি পদ্ধতি কেন ব্যবহৃত হয়েছিল তা আমি নিশ্চিত নই)।

উদাহরণস্বরূপ, এই প্রশ্নটি আমাকে বিশ্বাস করতে পরিচালিত করে যে কোনও ইভেন্ট হ্যান্ডলার বেশ কয়েকটি যুক্তি গ্রহণ করতে পারে। আমি অন্যান্য টিউটোরিয়াল দেখেছি যেখানে হ্যান্ডলারের কাছে মাত্র দুটি যুক্তি রয়েছে। কি পরিবর্তন?

Comments

সবেমাত্র লক্ষ্য করা গেছে ... বিষয় বন্ধ?

— jrharshath

88 টি প্রশ্নের উত্তর, প্রথম উত্তরের 155 টি আপোলেট এবং দুর্দান্ত এবং শক্তিশালী অ্যান্ড্রু সিদ্ধান্ত নিয়েছে যে এটি একটি বিষয় ছাড়াই। সিরিয়াস পাওয়ার ট্রিপ চলছে!

— নৌকা কোডার

আমি উত্তরগুলি সোনার খনি হিসাবে এই প্রশ্নটি পুনরায় খুলতে ভোট দিয়েছি। প্রশ্ন এবং এ শৈলীর আরও ভাল ফিট করার জন্য আমি প্রশ্নটি সম্পাদনা করেছি।

— dbrin

দয়া করে এই প্রশ্নটি আবার খুলুন 'কারণ এটি সত্যই সহায়ক এবং আসল প্রশ্ন। এত অন্ধভাবে আমরা এটি বন্ধ করতে পারি না।

— পীযূষ ধোলারিয়া

এটি একটি ভাল শব্দযুক্ত প্রশ্ন, এবং আমি এটি বন্ধ করার কোনও কারণ দেখতে পাচ্ছি না। এটিকে অফ অফ বিষয় বলা হাস্যকর। পুনরায় খোলার পক্ষে ভোট দিয়েছেন।

— মাইক ফুচস

Answer 1

আসুন DOM উপাদানগুলির ইভেন্ট হ্যান্ডলিং বর্ণনা করে শুরু করি।

ডোম নোড ইভেন্ট হ্যান্ডলিং

সবার আগে আপনি সরাসরি ডোম নোডের সাথে কাজ করতে চান না। পরিবর্তে আপনি সম্ভবত Ext.Elementইন্টারফেস ব্যবহার করতে চান । ইভেন্ট হ্যান্ডলারগুলি নির্ধারণের উদ্দেশ্যে Element.addListenerএবং Element.on(এগুলি সমতুল্য) তৈরি করা হয়েছিল। সুতরাং, উদাহরণস্বরূপ, যদি আমাদের এইচটিএমএল থাকে:

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

এবং আমরা clickইভেন্ট হ্যান্ডলার যোগ করতে চান ।
আসুন পুনরুদ্ধার করা যাক Element:

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

আসুন এখন clickইভেন্টের জন্য ডক্স পরীক্ষা করা যাক । এটির হ্যান্ডলারের তিনটি প্যারামিটার থাকতে পারে:

ক্লিক করুন (Ext.EventObject ই, HTMLElement টি, অবজেক্ট 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);
  }
});

কাস্টম ইভেন্ট গুলিবর্ষণ

সবার আগে আপনাকে অ্যাডএভেণ্টস পদ্ধতি ব্যবহার করে একটি ইভেন্ট নিবন্ধভুক্ত করতে হবে :

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

addEventsপদ্ধতিটি ব্যবহার করা alচ্ছিক। এই পদ্ধতির মন্তব্যে বলা হয়েছে যে এই পদ্ধতিটি ব্যবহার করার দরকার নেই তবে এটি ইভেন্ট ডকুমেন্টেশনের জন্য জায়গা সরবরাহ করে।

আপনার ইভেন্ট ব্যবহার আগুনে 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, /* ... */);
});

এটি উল্লেখ করার মতো বিষয় যে আপনি নতুন উইজেটটি সংজ্ঞায়িত করার সময় অ্যাডইভেন্টস পদ্ধতি কল সন্নিবেশ করানোর জন্য সেরা স্থানটি উইজেটের 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

এটি লোভ, তবে কিছু কনফিগারেশনের মাধ্যমে "অ্যাডভেন্টস" জিনিসটি করার কোনও উপায় আছে কি? :)

— jrharshath

@ জার্হশত, যতদূর আমি জানি দুর্ভাগ্যবশত, কনফিগারেশনের মাধ্যমে এটি করার কোনও উপায় নেই।

— আণবিক ম্যান

কীভাবে কেউ এই -'Myspecialevent1 'তৈরি করে, আমি দেখি আপনি এটি সংযুক্ত করেছেন এবং এটি পরিচালনা করেছেন তবে আমরা কীভাবে এটি তৈরি করব?

— ওহ এখন

জমকালো উত্তর! আমি এক্সটজে-তে নতুন এবং পৃষ্ঠার যে কোনও উপাদানকে রেফারেন্স করার জন্য এবং তার উপরে ইভেন্ট হ্যান্ডলারগুলি jQuery এর মতো ব্যবহার করার উপায় খুঁজছিলাম। তুমি আমাকে শিখিয়েছ! ধন্যবাদ!

— রটউইক গাঙ্গুরদে

"ইভেন্ট বুদবুদ প্রতিরোধ করা" বিভাগে সামান্য ত্রুটি। স্টপপ্যাজেগেশন ইভেন্ট বুদবুদ প্রতিরোধ করতে ব্যবহৃত হয়, এবং ডিফল্ট আচরণ / ক্রিয়াকলাপ রোধ করতে প্রতিরোধ ডিফল্ট ব্যবহার করা হয়।

— MatRt

Answer 2

অ্যাপ্লিকেশন প্রশস্ত ইভেন্টগুলিতে আগুন

কীভাবে নিয়ামকরা একে অপরের সাথে কথা বলবেন ...

উপরের খুব দুর্দান্ত উত্তরের পাশাপাশি আমি অ্যাপ্লিকেশন প্রশস্ত ইভেন্টগুলি উল্লেখ করতে চাই যা নিয়ামকদের মধ্যে যোগাযোগ সক্ষম করার জন্য এমভিসি সেটআপে খুব কার্যকর হতে পারে। (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মধ্যেও ফাংশনটি ফায়ার করব ...

সেনচা ডক্স থেকে:

অ্যাপ্লিকেশন ইভেন্টগুলি অনেকগুলি নিয়ামকযুক্ত ইভেন্টগুলির জন্য অত্যন্ত কার্যকর useful এই নিয়ামকগুলির প্রত্যেকটিতে একই দর্শন ইভেন্টের জন্য শোনার পরিবর্তে কেবলমাত্র একজন নিয়ামক দর্শন ইভেন্টটির জন্য শোনেন এবং অ্যাপ্লিকেশন ব্যাপী ইভেন্টটিকে অন্যরা শুনতে পাবে। এটি নিয়ামকগণ একে অপরের অস্তিত্ব সম্পর্কে জেনে বা নির্ভর না করে একে অপরের সাথে যোগাযোগ করতেও সহায়তা করে।

আমার ক্ষেত্রে: গ্রিড প্যানেলে ডেটা আপডেট করতে একটি ট্রি নোডে ক্লিক করা।

নীচের মন্তব্যগুলি থেকে @ gm2008 ধন্যবাদ 2016 আপডেট করুন:

অ্যাপ্লিকেশন-বিস্তৃত কাস্টম ইভেন্টগুলিতে গুলি চালানোর ক্ষেত্রে, 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.fireEvent('custom_event');যখন আপনি ইভেন্টটির কোনও হ্যান্ডলার নিবন্ধন করবেন, আপনি Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope};এখানে কল করুন একটি মূর্খতা । এই পদ্ধতিটি নিয়ামকদের মধ্যে সীমাবদ্ধ নয়। কোনও উপাদান উপাদান ইনপুট প্যারামিটার হিসাবে উপাদান উপাদান স্থাপনের মাধ্যমে একটি কাস্টম ইভেন্ট পরিচালনা করতে পারে scope। প্রশ্নটি আবার খোলা উচিত।

— gm2008

Answer 3

নিয়ামক ইভেন্ট শ্রোতাদের জন্য আরও একটি কৌশল।

আপনি যে কোনও উপাদান থেকে কোনও ইভেন্ট দেখার জন্য ওয়াইল্ডকার্ডগুলি ব্যবহার করতে পারেন:

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

Answer 4

উপরোক্ত উত্তরের উত্তরে কেবল কয়েক পেন্স যোগ করতে চেয়েছিলেন: আপনি যদি প্রাক্তন এক্সট্রাজ ৪.১-এ কাজ করে থাকেন এবং যদি অ্যাপ্লিকেশন প্রশস্ত ইভেন্ট না পান তবে তাদের প্রয়োজন হয় তবে আমি খুব সাধারণ কৌশলটি ব্যবহার করে যা সাহায্য করতে পারে: একটি তৈরি করুন অবজেক্টযোগ্য প্রসারিত সহজ অবজেক্ট, এবং এতে আপনার প্রয়োজন হতে পারে এমন কোনও অ্যাপ প্রশস্ত ইভেন্টগুলি সংজ্ঞায়িত করুন। তারপরে আপনি আপনার অ্যাপ্লিকেশনের যে কোনও জায়গা থেকে আসল এইচটিএমএল ডোম উপাদান সহ আগুন লাগাতে পারেন এবং সেই উপাদান থেকে প্রয়োজনীয় উপাদানগুলি রিলে করে কোনও উপাদান থেকে তাদের শুনতে পারেন।

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ইভেন্টের গ্রিড রিলে করার উদাহরণ দেয় । এটি কাস্টম উপাদানগুলি লেখার সময় বেশ কার্যকর হয় যা বেশ কয়েকটি উপ-উপাদানকে encapsulate করে।

অন্য উপায়ে, অর্থাত্ কোনও mycmpউপ-উপাদানগুলির মধ্যে একটি এনপ্যাপুলেটিং উপাদান দ্বারা প্রাপ্ত ইভেন্টগুলি পাস করা subcmp, এটি করা যেতে পারে this

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