Контроллер ExtJS 4.1, обрабатывающий событие нажатия узла дерева

Question

Возникли проблемы и не знаете, как продолжить отладку. Нашел вопрос, который выглядит почти так же, как мой, но решение не работает: как отлавливать щелчки узлов дерева из контроллера (MVC) в ExtJs 4?

Единственное различие, которое я вижу между этим вопросом и моим, состоит в том, что мое дерево создается непосредственно в моем макете как объект элемента, используя xtype из treepanel где тот создан отдельно.

Вот мой контроллер:

Ext.define("IOL.controller.app.AppLayout", {
    extend: 'Ext.app.Controller',
    init: function() {
        this.control({
            'app toolbar > button[itemId=filter]' : {
                click: this.onFilter
            },
            'menuTree': {
                itemclick: this.onFilter
            }
        });
    },

    onFilter: function(btn) {
        alert('test');
        Ext.create('IOL.view.app.Home').show();
    }

});

Вот соответствующий пункт с моей точки зрения:

{
        xtype: 'treepanel',
        title: 'Navigation',
        split: true,
        collapsible: true,
        margins: '5 0 5 5',
        region: 'west',
        width: 170,
        id: 'menuTree',
        alias: 'widget.menuTree',
        store: Ext.create('IOL.store.app.AppNav'),
        useArrows: true,
        rootVisible: false
        /*listeners : {
            itemdblclick : function(view,rec,item,index,eventObj) {

                console.log(view);
                console.log(rec);
                console.log(item);
                console.log(index);
                console.log(eventObj);
                if(rec.get('leaf') == true){
                    Ext.ComponentQuery.query('tabpanel')[0].add({
                        xtype: 'panel',
                        title: rec.get('text'),
                        itemId: rec.get('id'),
                        //url: 'server/HomeTab/read.php',
                        html : 'test content name: ' + rec.get('id'),
                        closable : true
                    });
                }

            }
        }*/
    }

Элемент управления для кнопки app toolbar > button[itemId=filter] работает, однако назначение того же действия для menuTree не работает. Консоль браузера возвращает действительный объект с Ext.getCmp('menuTree') поэтому я заблудился относительно того, почему контроллер, кажется, не действует на дереве.

Дерево загружается из магазина, что заставляет меня задуматься, не похож ли этот сценарий на тот, где нужно было бы использовать .on('click') скорее, чем .click() в jQuery... почти как контроллер не видит дерево (но видит кнопку в том же виде?). Я специально закомментировал обработчик прямо на дереве (который работает).

Могу предоставить все файлы, если это поможет.

Answer 1

Ext.getCmp() возвращает компоненты по id, а контроллеры используют синтаксис Ext.ComponentQuery.query() для поиска их компонентов; так эффективно вы пытаетесь управлять компонентом с помощью xtype menuTree, который не существует. Вы должны использовать либо "#menuTree", либо "treepanel" в качестве селектора.