ExtJS5 Web 桌面示例：无法从控制器触发事件

Question

我一直在 ExtJS5 中使用 web desktop example。该示例具有静态数据且没有事件。我想在网格窗口上的“删除某些东西”按钮上实现一个点击事件。这是我修改后的代码：

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

我无法在控制器内处理“onDeleteClick”事件。这是控制器定义：

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

谁能指出错误。这个事件如何处理？

Answer 1

Ext.ux.desktop.Module 不接受 controller 配置选项。 在Ext.Component 上使用您的控制器——在您的情况下是网格或窗口。