Question

When using the Sencha ExtJS framework, the events for your view live inside of the controller for that view. If you’re not using a controller, where do you store the events.

For example, suppose our MVC application, we have a grid of users (userlist), and we have an event “itemdblclick”. How would we implement “itemdblclick” inside of our non-MVC application?

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

    // we no longer define the Users store in the `initComponent` method
    store: 'Users',

...

});



Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: ['Users'],
    models: ['User'],

    views: [
        'user.List',
        'user.Edit'
    ],

    init: function() {
        this.control({
            'viewport > userlist': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },

    editUser: function(grid, record) {
        var view = Ext.widget('useredit');
        view.down('form').loadRecord(record);
    },

    updateUser: function(button) {
        console.log('clicked the Save button');

        var win = 
            button.up('window'),
            form = win.down('form'),
            record = form.getRecord(),
            values = form.getValues();

        record.set(values);
        win.close();

        // synchronize the store after editing the record
        this.getUsersStore().sync();
    }

});

Answer 1

They should live in the listeners property of the Component (really of the Observable), like this:

http://jsfiddle.net/3LCm4/7/

docs:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.Observable-cfg-listeners