Question

Having trouble and not sure how to proceed with debug. Found a question that looks almost exactly like mine, however the solution doesn’t work: How to catch tree node clicks from a (MVC) controller in ExtJs 4?

The only difference I can see between that question and mine is that my tree is created directly within my layout as an item object using xtype of treepanel where that one is created separately.

Here is my controller:

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();
    }

});

Here is the relevant item from my view:

{
        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
                    });
                }

            }
        }*/
    }

The control for the button app toolbar > button[itemId=filter] works, however assigning the same action to the ‘menuTree’ does not work. Browser console brings back a valid object with Ext.getCmp('menuTree') so I’m lost as to why the controller does not seem to be acting on the tree.

The tree is loading from a store, which makes me wonder if this is a similar scenario to where one would need to use .on('click') rather than .click() in jQuery…almost like the controller is not seeing the tree (but sees the button in the same view?). I purposely commented out the handler directly on the tree (which does work).

Can provide all the files if it would help.

Answer 1

Ext.getCmp() returns components by id, while Controllers use Ext.ComponentQuery.query() syntax to find their components; so effectively you’re trying to control a component with xtype menuTree that doesn’t exist. You should use either ‘#menuTree’ or ‘treepanel’ as your selector.