Триггер контроллера ExtJS при нажатии гиперссылки

Я пытался заставить это работать довольно долго, но я все еще не смог найти решение для этого, кроме добавления 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');
     }
});

вид / ядро / навигация.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'
        }
    ]
});
6
controller extjs extjs4

2 ответов

как вы пытаетесь ссылаться на гиперссылку 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();
           });
      }
   }
})
7

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

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

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

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