Ext JS grid panel events

Question

I am developing my first EXT js mvc application. I have a problem adding events listeners to my grid panel from controller class.

My question is why i am getting below error while adding event handlers through 'on' method using below code

Error:

Uncaught TypeError: 
    gridPanel.on is not a function
    at constructor.init 

Relevant Code:

var gridPanel = Ext.ComponentQuery.query('userlist');
gridPanel.on('itemdblclick', this.editUser, gridPanel);

I am able to add handlers through a different method though but i am trying to figure out what is wrong with adding through 'on' method on grid panel reference. Any help is appreciated.

Thanks

---

Here is my complete controller class

Ext.define('AM.controller.Users', {
        extend: 'Ext.app.Controller',

        views: ['user.List'],

        init: function() {

            var gridPanel = Ext.ComponentQuery.query('userlist');
            gridPanel.on('itemdblclick', this.editUser, gridPanel);
        },

        editUser: function() {
            console.log('User edit has begun..');
        }
}, function() {

}); 

And my grid panel class:

Ext.define('AM.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',   
    title: 'All Users',
    id: 'usergrid',

    initComponent: function() {

            this.store = {
                fields: ['name', 'email'],
                data  : [
                    {name: 'Ed',    email: '[email protected]'},
                    {name: 'Tommy', email: '[email protected]'}
                ]
            };

            this.columns = [
                {header: 'Name',  dataIndex: 'name',  flex: 1},
                {header: 'Email', dataIndex: 'email', flex: 1}
            ],

        this.callParent(arguments);

    }
});

Answer 1

Ext.ComponentQuery.query('userlist') returns an array of found components - so you need to select the first item in the array to actually get your component: Ext.ComponentQuery.query('userlist')[0]

The Ext.first('userlist') shorthand makes this simpler. (As @sceborati mentioned in the comments)

When you use component query you are querying by its xtype*

You have also specified an id in your component, which is OK if you will only have one instance on a page, (as soon as you have more than one - you should not use ids) You can find components much quicker using Ext.getCmp('componentid') so Ext.getCmp('userlist') would also work for you.

All that being said, to make better use of ExtJs MVC capabilities, you could switch to using a ViewController, and then you don't need to do any lookups for your components at all:

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.userlist',
    editUser: function () {
        console.log('User edit has begun..');
    }
});

Ext.define('AM.view.user.List', {
    extend: 'Ext.grid.Panel',
    xtype: 'userlist',
    title: 'All Users',
    id: 'usergrid',
    controller: 'userlist',
    store: {
        fields: ['name', 'email'],
        data: [{
            name: 'Ed',
            email: '[email protected]'
        }, {
            name: 'Tommy',
            email: '[email protected]'
        }]
    },
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        flex: 1
    }, {
        header: 'Email',
        dataIndex: 'email',
        flex: 1
    }],
    listeners:{
        itemdblclick:'editUser'
    }
});

Notice the alias config added to controller, and the corresponding controller config on the view.

This means you can specify listeners just by providing the method name on the controller.

    listeners:{
        itemdblclick:'editUser'
    }

You may also notice I have moved your column and store configuration out of the initComponent method - your use of initComponent would work, but this method is much cleaner.

I have created a fiddle to demonstrate this updated code:

https://fiddle.sencha.com/#view/editor&fiddle/1qvu

You also seem to be passing an extra function as a third argument when defining your controller - you should remove this.

---

* you have used alias:'widget.userlist' which is the same as xtype:'userlist'

Answer 2

The query method on Ext.ComponentQuery returns an array of components. So you would need to provide an index, like:

var gridPanel = Ext.ComponentQuery.query('userlist')[0];