ExtJS5 Web Desktop Sample: Unable to fire event from controller

Question

I have been working with web desktop example in ExtJS5. The example has static data and no events. I wanted to implement a click event on 'Remove Something' button on grid window. Here is my modified code:

Ext.define('SampleApp.view.main.GridWindow', {
    extend: 'Ext.ux.desktop.Module',

    requires: [
        'Ext.data.ArrayStore',
        'Ext.util.Format',
        'Ext.grid.Panel',
        'Ext.grid.RowNumberer'
    ],   

        init: function () {
        this.launcher = {
            text: 'Grid Window',
            iconCls: 'icon-grid'
        };
    },
    controller: 'gridwindow',
    createWindow: function () {
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('grid-win');
        if (!win) {
            win = desktop.createWindow({
                id: 'grid-win',
                title: 'Grid Window',
                width: 740,
                height: 480,
                iconCls: 'icon-grid',
                animCollapse: false,
                constrainHeader: true,
                layout: 'fit',
                items: [
                    {
                        border: false,
                        xtype: 'grid',
                        store: mock.view.main.GridWindow.getDummyData(),
                        columns: [{ xtype: 'rownumberer', sortable: false, text: "S.N.", width: 70 }, {
                            id: 'topic',
                            text: "Topic",
                            dataIndex: 'gridTopic',
                            flex: 1,
                            align: 'center'
                        }, {
                            text: "Author",
                            dataIndex: 'gridAuthor',
                            flex: 1,
                            align: 'center',
                            sortable: true
                        }, {
                            text: "Replies",
                            dataIndex: 'gridReplies',
                            align: 'center',
                            flex: 1,
                            sortable: true
                        }, {
                            id: 'last',
                            text: "Last Post",
                            dataIndex: 'gridLastPost',
                            flex: 1,
                            align: 'center',
                            sortable: true
                        }]
                    }
                ],
                tbar: [{
                    text: 'Add Something',
                    tooltip: 'Add a new row',
                    iconCls: 'add'
                }, '-', {
                    text: 'Options',
                    tooltip: 'Modify options',
                    iconCls: 'option'
                }, '-', {
                    text: 'Remove Something',
                    tooltip: 'Remove the selected item',
                    iconCls: 'remove',
                    listeners: {
                        click: 'onDeleteClick'
                    }

                }]
            });
        }
        return win;
    },

    statics: {
        getDummyData: function () {
            var _store = Ext.create('Ext.data.Store', {
                fields: [
                        { name: 'gridId', type: 'int' },
                        { name: 'gridTopic', type: 'string' },
                        { name: 'gridAuthor', type: 'string' },
                        { name: 'gridReplies', type: 'string' },
                        {
                            name: 'gridLastPost', type: 'date', convert: function (value) {
                                var _date = new Date(value);
                                return Ext.Date.format(_date, "Y-m-d H:i:s");
                            }
                        }
                ]
            });

            var _responseText;
            Ext.Ajax.request({
                async: false,
                url: 'http://localhost/sampleapp/getusers',
                method: 'GET',
                success: function (resp) {
                    _responseText = Ext.decode(resp.responseText);
                    _store.loadData(_responseText);
                }
            });
            return _store;
        }
    }
});

I am unable to handle 'onDeleteClick' event inside the controller. Here is the controller definition:

Ext.define('SampleApp.view.main.GridWindowController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.gridwindow',
    onDeleteClick: function (button, evt) {     
        alert('Clicked');
    }
});

Can someone point out the mistake. How can this event be handled?

Answer 1

Ext.ux.desktop.Module does not accept controller config option. Use your controller on an Ext.Component — in your case either the grid or the window.