2011-10-24 47 views
6

我一直試圖讓它工作很長一段時間,但我仍然無法找到解決方案,除了在視圖中添加偵聽器內的afterrender。但我希望控制器能夠處理它。ExtJS控制器觸發超鏈接點擊

有沒有人有關於我如何解決這個問題的想法?

這是我在我的文件目前 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' 
     } 
    ] 
}); 

回答

7

你現在的樣子嘗試引用的超級鏈接a韓元」工作。

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

這隻會尋找ExtJS組件,而不是DOM元素。您很可能必須將點擊附加到afterrender或類似的地方。這並不意味着你不能離開在控制器中完成所有工作的方法。

編輯:

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

感謝您的答覆s_hewitt。我會嘗試將它轉換成當我從下班回家時起作用的東西:) – Ole

+0

我一直在試圖解決這個問題。如果我在視圖的afterrender中用警報替換註釋,它會被正確觸發。但是我正在努力的是視圖和控制器之間的聯繫。此外,我不確定我的控制器中的「newTab」部件是否正確。這是我現在的代碼:http://pastie.org/2757329 – Ole

+0

將'afterrender'監聽器移到你的控制器。看我的編輯。 –

2

我有問題,努力爲好。底線是控制器控制配置不像常規監聽器那樣工作,並且只會作用於組件觸發的事件,而不是像s_hewitt指出的那樣由DOM觸發。

這些替代品有些醜陋,本質上聽衆對組件或父組件也可以使用委託。一旦你走了這條路線,它不像在控制器中設置監聽器那樣乾淨利落。

另一個技巧我曾經繞過這個限制是調用從這樣的視圖組件控制器方法:

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

感謝您的投入德米特里。但通過稍微修改s_hewitt的答案,我的應用程序現在可以在所有僅由其控制器控制的視圖上運行,但我會注意到這一點,以防我需要這樣做:) – Ole