DOM 요소의 이벤트 처리에 대해 설명하겠습니다.

DOM 노드 이벤트 처리

우선 DOM 노드로 직접 작업하고 싶지 않을 것입니다. 대신 Ext.Element인터페이스 를 사용하고 싶을 것입니다 . 할당하는 이벤트 핸들러의 목적을 위해, Element.addListener그리고 Element.on(이들은 동일)이 생성되었다. 예를 들어 html이 있다면 :

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

click이벤트 핸들러를 추가하고 싶습니다 .
검색하자 Element:

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

이제 click이벤트에 대한 문서를 확인하십시오 . 핸들러에는 세 가지 매개 변수가있을 수 있습니다.

click (Ext. EventObject e, HTMLElement t, Object eOpts)

이 모든 것을 알면 핸들러를 할당 할 수 있습니다.

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

위젯 이벤트 처리

위젯 이벤트 처리는 DOM 노드 이벤트 처리와 매우 유사합니다.

우선, 위젯 이벤트 처리는 Ext.util.Observablemixin 을 사용하여 실현됩니다 . 이벤트를 올바르게 처리하려면 위젯 Ext.util.Observable이 믹스 인으로 포함되어 있어야합니다 . 모든 내장 위젯 (예 : 패널, 양식, 트리, 격자 등)은 Ext.util.Observable기본적으로 믹스 인입니다.

위젯의 경우 핸들러를 지정하는 두 가지 방법이 있습니다. 첫 번째 방법 은 메소드 에서 사용 하는 것 addListener입니다. 예를 들어 Button위젯을 생성 하고 click이벤트를 할당 해 봅시다 . 우선 핸들러의 인수에 대한 이벤트 문서를 확인해야합니다.

click (Ext.button. Button this, Event e, Object 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위젯은 위젯의 특별한 종류이다. handlerconfig 를 사용하여 클릭 이벤트를이 위젯에 지정할 수 있습니다 .

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

이벤트 버블 링 방지

거품을 방지하기 위해 return false사용할 수 있습니다 Ext.EventObject.preventDefault(). 브라우저의 기본 동작 사용을 방지하기 위해Ext.EventObject.stopPropagation() .

예를 들어 클릭 이벤트 핸들러를 버튼에 할당 해 보겠습니다. 왼쪽 버튼을 클릭하지 않으면 기본 브라우저 동작을 방지하십시오.

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

답변

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]);
    },
   ...
});

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

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?');
    },
}

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

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

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