Запуск контроллера ExtJS по щелчку гиперссылки - PullRequest
6 голосов
/ 24 октября 2011

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

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

Это то, что у меня есть в моих файлах на данный момент 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'
        }
    ]
});

Ответы [ 2 ]

7 голосов
/ 25 октября 2011

То, как вы пытаетесь сослаться на гиперссылку a, не будет работать.

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

Это будет искать только компоненты ExtJS, а не элементы DOM.Скорее всего, вам придется прикрепить клик в последующем или где-то подобное.Это не означает, что вы не можете оставить методы, которые выполняют всю работу в контроллере.

Редактировать:

var controller = this;
controller.control({
   'navigation': {
      afterrender: function() {
           Ext.get('tab1').on('click', function() {
                controller.newTab();
           });
      }
   }
})
2 голосов
/ 26 октября 2011

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

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

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

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