최근에 ExtJS를 배우기 시작했으며 이벤트 처리 방법을 이해하는 데 어려움이 있습니다. ExtJS의 이전 버전에 대한 경험이 없습니다.

다양한 매뉴얼, 안내서 및 설명서 페이지를 읽음으로써 사용법을 알아 냈지만 어떻게 작동하는지 잘 모르겠습니다. 이전 버전의 ExtJS에 대한 몇 가지 자습서를 찾았지만 ExtJS 4에 적용 할 수있는 방법이 확실하지 않습니다.

저는 구체적으로 다음과 같은 것들에 대한 "최종 단어"를보고 있습니다

• 이벤트 처리 함수에는 어떤 인수가 전달됩니까? 항상 전달되는 표준 인수 세트가 있습니까?
• 우리가 작성하는 사용자 컴포넌트에 대한 사용자 정의 이벤트를 정의하는 방법은 무엇입니까? 이 맞춤 이벤트를 어떻게 시작할 수 있습니까?
• 반환 값 (true / false)이 이벤트 버블 방식에 영향을 줍니까? 그렇지 않은 경우 이벤트 처리기 내부 또는 외부에서 이벤트 버블 링을 어떻게 제어 할 수 있습니까?
• 이벤트 리스너를 등록하는 표준 방법이 있습니까? (지금까지 두 가지 다른 방법을 사용했으며 각 방법이 사용 된 이유를 잘 모르겠습니다).

예를 들어, 이 질문 은 이벤트 핸들러가 상당히 많은 인수를받을 수 있다고 믿게합니다. 처리기에 대한 두 가지 인수가있는 다른 자습서를 보았습니다. 어떤 변화가 있습니까?

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();
});

응용 프로그램 전체 이벤트 발생

컨트롤러가 서로 대화하는 방법 ...

위의 큰 대답 외에도 컨트롤러 간 통신을 가능하게하는 MVC 설정에 매우 유용한 응용 프로그램 범위의 이벤트를 언급하고 싶습니다. (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도 실행합니다 ...

Sencha 문서에서 :

응용 프로그램 이벤트는 많은 컨트롤러가있는 이벤트에 매우 유용합니다. 이러한 각 컨트롤러에서 동일한 뷰 이벤트를 수신하는 대신 한 컨트롤러 만 뷰 이벤트를 수신하고 다른 컨트롤러가 수신 할 수있는 응용 프로그램 전체 이벤트를 발생시킵니다. 이것은 또한 컨트롤러가 서로의 존재에 대해 알거나 의존하지 않고 서로 통신 할 수있게합니다.

제 경우에는 : 그리드 패널에서 데이터를 업데이트하기 위해 트리 노드를 클릭하십시오.

아래 의견에서 @ gm2008 덕분에 2016을 업데이트하십시오.

응용 프로그램 전체의 사용자 지정 이벤트 발생과 관련하여 ExtJS V5.1 이 게시 된 후을 사용 하는 새로운 방법 이 Ext.GlobalEvents있습니다.

이벤트를 시작하면 다음을 호출 할 수 있습니다. Ext.GlobalEvents.fireEvent('custom_event');

이벤트 핸들러를 등록하면 다음을 호출합니다. Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);

이 방법은 컨트롤러에만 국한되지 않습니다. 모든 구성 요소는 구성 요소 개체를 입력 매개 변수 범위로 설정하여 사용자 지정 이벤트를 처리 할 수 ​​있습니다.

Sencha Docs에서 발견됨 : MVC Part 2

컨트롤러 이벤트 리스너를위한 또 하나의 트릭.

와일드 카드를 사용하여 모든 구성 요소의 이벤트를 감시 할 수 있습니다.

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

위의 훌륭한 답변에 몇 가지 펜스를 추가하고 싶었습니다 .Extjs 4.1 이전 작업을하고 응용 프로그램 전체 이벤트가 없지만 필요한 경우 매우 유용한 기술을 사용하고 있습니다. Observable을 확장하는 간단한 객체로, 필요한 앱 전체 이벤트를 정의하십시오. 그런 다음 실제 html dom 요소를 포함하여 앱의 어느 곳에서나 해당 이벤트를 발생시키고 해당 구성 요소의 필수 요소를 릴레이하여 모든 구성 요소에서 해당 이벤트를들을 수 있습니다.

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

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

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

그런 다음 다른 구성 요소에서 다음을 수행 할 수 있습니다.

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

그리고 모든 구성 요소 또는 dom 요소에서 실행하십시오.

 MessageBus.fireEvent('event1', somearg);

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

그들이 질문의 일부가 아닌 경우에도, 내가 아는 것이 도움이되는 것을 단 두 가지 더 알았습니다.

이 relayEvents메소드를 사용하여 구성 요소에 다른 구성 요소의 특정 이벤트를 수신 한 다음 첫 번째 구성 요소에서 시작된 것처럼 다시 시작하도록 지시 할 수 있습니다 . API 문서는 상점 load이벤트를 중계하는 그리드의 예를 제공합니다 . 여러 하위 구성 요소를 캡슐화하는 사용자 지정 구성 요소를 작성할 때 매우 유용합니다.

다른 방법, 즉 캡슐화 구성 요소 mycmp에 의해 수신 된 이벤트를 하위 구성 요소 중 하나에 전달하는 subcmp것은 다음과 같이 수행 할 수 있습니다

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