>

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

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

특히 '최종 단어'를보고 있습니다

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

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


  • 답변 # 1

    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 )

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

    먼저 위젯 이벤트 처리는 // 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 를 사용합시다 :

    click( Ext.button.Button this, Event e, Object eOpts )

    두번째 방법은 위젯의 리스너 설정을 사용하는 것입니다 :

    on
    
    

    와이즈 비즈주의 사항widget은 특별한 종류의 위젯입니다. 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);
        }
      }
    });
    
    
    맞춤 이벤트 발생

    먼저 addEvents 메소드를 사용하여 이벤트를 등록해야합니다 :

    Button
    
    

    handler 사용  방법은 선택 사항입니다. 이 방법에 대한 의견에서이 방법을 사용할 필요는 없지만 이벤트 문서화를위한 장소를 제공합니다.

    이벤트를 시작하려면 fireEvent 메소드를 사용하십시오 :

    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
    
    

    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, /* ... */); }); 를 사용할 수 있습니다.  또는 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
    
    

  • 답변 # 2

    애플리케이션 전체 이벤트 발생 컨트롤러가 서로 대화하는 방법 ...

    위의 훌륭한 답변 외에도 컨트롤러 간 통신을 가능하게하는 MVC 설정에 매우 유용한 응용 프로그램 전반의 이벤트를 언급하고 싶습니다. (extjs4.1)

    선택 상자가있는 컨트롤러 스테이션 (Sencha MVC 예)이 있다고 가정합니다.

    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]); }, ... }); 의 청취를 통해 이루어집니다  다음과 같이 :

    onStationSelect
    
    

    선택 상자가 변경되면 this.application.fireEvent('stationstart', selection[0]); 함수가 실행됩니다.  컨트롤러 this.application.on 에서  또한 ...

    Sencha 문서에서 :

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

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

    아래 설명에서 @ gm2008 덕분에 2016 업데이트 :

    애플리케이션 전체의 커스텀 이벤트를 발생시키는 관점에서,ExtJS V5.1이 게시 된 후 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 Docs에서 발견 : MVC Part 2

  • 답변 # 3

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

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

    Ext.GlobalEvents
    
    

  • 답변 # 4

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

    Ext.GlobalEvents.fireEvent('custom_event');
    
    

    그러면 다른 구성 요소에서 가능합니다 :

    Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);
    
    

    그리고 컴포넌트 나 dom 요소에서 실행하십시오 :

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

  • 답변 # 5

    질문에 속하지 않더라도 내가 아는 것이 도움이되는 것 두 가지가 더 있습니다.

    Ext.define('Lib.MessageBus', { extend: 'Ext.util.Observable', constructor: function() { this.addEvents( /* * describe the event */ "eventname" ); this.callParent(arguments); } }); 를 사용할 수 있습니다  구성 요소가 다른 구성 요소의 특정 이벤트를 수신 한 다음 첫 번째 구성 요소에서 시작된 것처럼 다시 시작하도록하는 방법입니다. API 문서는 상점 this.relayEvents(MesageBus, ['event1', 'event2']) 를 중계하는 그리드의 예를 제공합니다.  행사. 여러 하위 구성 요소를 캡슐화하는 사용자 지정 구성 요소를 작성할 때 매우 편리합니다.

    다른 방법, 즉 캡슐화 구성 요소 MessageBus.fireEvent('event1', somearg); <input type="button onclick="MessageBus.fireEvent('event2', 'somearg')"> 에 의해 수신 된 이벤트 전달  하위 구성 요소 중 하나 인 relayEvents , 이렇게 할 수 있습니다

    load
    
    
    mycmp

  • 이전 javascript - 구조체의 samplerCube로 인해 GL_INVALID_OPERATION
  • 다음 html - gitlab의 Wiki 기능 내에서 인어 순서도에 하이퍼 링크를 추가 할 수 없습니다