2011-10-24 2 views
6

Я пытался заставить это работать довольно долгое время, но я до сих пор не смог найти решение для этого, кроме добавления в представлении внутри прослушивателей. Но я хочу, чтобы контроллер справился с этим.Триггер ExtJS Controller на гиперссылке

У кого-нибудь есть идея, как я могу это решить?

Это то, что у меня есть в моих файлах на данный момент 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 или где-то аналогичный. Это не означает, что вы не можете оставить методы, которые выполняют всю работу в контроллере.

Edit:

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

я боролся с вопросом, как хорошо. Суть в том, что конфигурация контроллера Control не работает, как обычные слушатели, и будет действовать только на события, которые запускаются компонентом, а не DOM, как указал s_hewitt.

Альтернативы несколько уродливы, по существу, слушателями компонентов или родительских компонентов, где вы также можете использовать делегатов. Как только вы идете по этому маршруту, это не так чисто, как настройка слушателей в контроллере.

Другой трюк, который я использовал, чтобы обойти это ограничение вызова методов управления из компонентов зрения, как это:

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

Спасибо за ваши данные DmitryB. Но, изменив ответ s_hewitt, крошечное приложение теперь работает на всех представлениях, контролируемых только его контроллером, но я это заметлю, если мне нужно сделать такой подход :) – Ole

Смежные вопросы