Kích hoạt bộ điều khiển ExtJS trên siêu liên kết click

Question

Tôi đã cố gắng làm việc này trong một thời gian nhưng tôi vẫn chưa thể tìm ra giải pháp cho việc này trừ việc thêm một người nghe bên trong vào xem. Nhưng tôi muốn bộ điều khiển xử lý nó.

Có ai có ý tưởng về cách tôi có thể giải quyết vấn đề này không?

Đây là những gì tôi có trong tác phẩm của tôi tại thời điểm 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'); 
    } 
}); 

xem/lõi/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

Cách bạn đang cố gắng để tham khảo các siêu liên kết a won' t làm việc.

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

Điều đó sẽ chỉ tìm kiếm các thành phần ExtJS, chứ không phải các thành phần DOM. Bạn rất có thể sẽ phải đính kèm các nhấp chuột trong phần sau hoặc một nơi nào đó tương tự. Điều này không có nghĩa là bạn không thể rời khỏi các phương thức làm tất cả công việc trong bộ điều khiển.

Edit:

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

Answer 2

tôi đã phải vật lộn với vấn đề là tốt. Điểm mấu chốt là cấu hình điều khiển Bộ điều khiển không hoạt động giống như những người nghe thông thường và sẽ chỉ hành động trên các sự kiện được bắn bởi thành phần chứ không phải bởi DOM như s_hewitt đã chỉ ra.

Các lựa chọn thay thế có phần xấu xí với những người nghe chủ yếu về thành phần hoặc thành phần chính nơi bạn cũng có thể sử dụng các đại biểu. Một khi bạn đi con đường đó nó không phải là cắt sạch như thiết lập người nghe trong bộ điều khiển.

Một lừa tôi sử dụng để khắc phục hạn chế này đang kêu gọi các phương pháp điều khiển từ các thành phần view như thế này:

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