하이퍼 링크 클릭시 ExtJS 컨트롤러 트리거

Question

저는이 기능을 꽤 오랫동안 사용할 수있게하려고 노력해 왔지만 여전히 청취자 내부에 Afterrender를 추가하는 것을 제외하고는 솔루션을 찾을 수 없었습니다. 하지만 컨트롤러가 그것을 처리하기를 원합니다.

아무도 내가 이것을 해결할 수있는 아이디어가 있습니까?

이

는/나는 순간 http://pastie.org/2751446

controller/App.js 

    Ext.define('HD.controller.App', { 
    extend: 'Ext.app.Controller' 
    ,views: [ 
     'core.Header', 
     'core.Navigation', 
     'core.Content' 
    ] 
    ,init: function() { 
     this.control({ 
      'navigation a[id=tab1]': { 
       click: this.newTab 
      } 
     }) 
    } 
    ,newTab: function() { 
     console.log('Tab 1 should be loaded now'); 
    } 
}); 

보기/핵심 내 파일이 무엇인지 Navigation.js

Ext.define('HD.view.core.Navigation', { 
    extend: 'Ext.panel.Panel' 
    ,name: 'navigation' 
    ,alias: 'widget.navigation' 
    ,layout: 'accordion' 
    ,region: 'west' 
    ,width: 200 

    ,title: 'Navigation' 
    ,collapsible: true 

    ,items: [ 
     { 
      title: 'Title 1' 
      ,html: '<a id="tab1" style="cursor:pointer;">Tab 1</a>' 
     }, 
     { 
      title: 'Title 2' 
      ,html: 'Second' 
     } 
    ] 
}); 

Answer 1

방법 하이퍼 링크 a원 '를 참조하려고하다 일하지 마라.

this.control({ 
    'navigation a[id=tab1]': { 
     click: this.newTab 
    } 
}) 

그러면 DOM 요소가 아닌 ExtJS 구성 요소 만 찾습니다. 애프터 애님이나 다른 유사한 곳에서 클릭을 연결해야 할 가능성이 큽니다. 그렇다고해서 컨트롤러에서 모든 작업을 수행하는 메서드를 남겨 둘 수 없다는 의미는 아닙니다.

편집 :

var controller = this; 
controller.control({ 
    'navigation': { 
     afterrender: function() { 
      Ext.get('tab1').on('click', function() { 
       controller.newTab(); 
      }); 
     } 
    } 
}) 

Answer 2

나뿐만 아니라 문제로 고생했다. 결론은 컨트롤러 컨트롤 구성이 일반 수신기와 같이 작동하지 않으며 s_hewitt가 지적한대로 DOM이 아닌 구성 요소에 의해 실행되는 이벤트에만 적용됩니다.

대리자를 사용할 수있는 구성 요소 나 부모 구성 요소의 본질적으로 청취자는 대안이 다소 추합니다. 일단 당신이 그 경로를 가면 그것은 제어기에서 청취자를 세우는 것과 같이 깔끔한 방법이 아닙니다.

나는이 같은 뷰 컴포넌트에서 컨트롤러 메소드를 호출되어이 문제를 해결 얻기 위해 사용하는 또 다른 트릭 : 회신 s_hewitt에 대한

MyApp.app.getController('MyController').myFunction();