如何在extjs中单击按钮后打开一个窗口

Question

I am working with extjs designer 2. It works ok and i designed a viewport. It creates some view files. The first one is myviewport.js:

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'tabpanel',
                activeTab: 1,
                region: 'center',
                items: [{
                    xtype: 'panel',
                    title: 'SIM usage'
                }, {
                    xtype: 'gridpanel',
                    title: 'Reports',
                    forceFit: true,
                    store: 'ReportsStore',
                    columns: [{
                        xtype: 'gridcolumn',
                        dataIndex: 'Name',
                        text: 'Name'
                    }, {
                        xtype: 'gridcolumn',
                        dataIndex: 'Type',
                        text: 'Type'
                    }, {
                        xtype: 'gridcolumn',
                        dataIndex: 'Description',
                        text: 'Description'
                    }, {
                        xtype: 'actioncolumn',
                        items: [{
                            handler: function (view, rowIndex, colIndex, item, e) {
                                alert(view);
                            },
                            altText: 'Run report',
                            iconCls: 'runReport'
                        }]
                    }],
                    viewConfig: {

                    },
                    dockedItems: [{
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [{
                            xtype: 'tbfill'
                        }, {
                            xtype: 'button',
                            iconCls: 'addReport',
                            text: 'Add report',
                            listeners: {
                                click: {
                                    fn: me.onButtonClick,
                                    scope: me
                                }
                            }
                        }]
                    }]
                }, {
                    xtype: 'panel',
                    title: 'Pyshical SIM cards'
                }, {
                    xtype: 'panel',
                    title: 'Virtual SIM cards'
                }, {
                    xtype: 'form',
                    layout: {
                        type: 'absolute'
                    },
                    bodyPadding: 10,
                    title: 'Config',
                    items: [{
                        xtype: 'numberfield',
                        id: 'IP1',
                        width: 220,
                        fieldLabel: 'Server IP',
                        labelWidth: 150
                    }, {
                        xtype: 'numberfield',
                        id: 'IP2',
                        width: 80,
                        fieldLabel: '.',
                        labelPad: 0,
                        labelSeparator: ' ',
                        labelWidth: 10,
                        x: 240,
                        y: 10
                    }, {
                        xtype: 'numberfield',
                        id: 'IP3',
                        width: 80,
                        fieldLabel: '.',
                        labelPad: 0,
                        labelSeparator: ' ',
                        labelWidth: 10,
                        x: 330,
                        y: 10
                    }, {
                        xtype: 'numberfield',
                        id: 'IP4',
                        width: 80,
                        fieldLabel: '.',
                        labelPad: 0,
                        labelSeparator: ' ',
                        labelWidth: 10,
                        x: 420,
                        y: 10
                    }, {
                        xtype: 'textfield',
                        id: 'username',
                        fieldLabel: 'username',
                        labelWidth: 150,
                        anchor: '100%',
                        x: 10,
                        y: 40
                    }, {
                        xtype: 'textfield',
                        id: 'password',
                        inputType: 'password',
                        fieldLabel: 'password',
                        labelWidth: 150,
                        anchor: '100%',
                        x: 10,
                        y: 70
                    }, {
                        xtype: 'textareafield',
                        id: 'emails',
                        fieldLabel: 'Alert emails',
                        labelWidth: 150,
                        anchor: '100%',
                        x: 10,
                        y: 100
                    }, {
                        xtype: 'textfield',
                        id: 'smtp',
                        fieldLabel: 'SMTP',
                        labelWidth: 150,
                        anchor: '100%',
                        x: 10,
                        y: 170
                    }, {
                        xtype: 'textfield',
                        id: 'smtpCredentials',
                        fieldLabel: 'SMTP Server credentials',
                        labelWidth: 150,
                        anchor: '100%',
                        x: 10,
                        y: 200
                    }, {
                        xtype: 'button',
                        height: 30,
                        width: 90,
                        text: 'Restore',
                        x: 170,
                        y: 230
                    }, {
                        xtype: 'button',
                        height: 30,
                        width: 90,
                        text: 'Save config',
                        x: 270,
                        y: 230
                    }]
                }]
            }]
        });

        me.callParent(arguments);
    },

    onButtonClick: function (button, e, options) {}
});

with the

onButtonClick: function(button, e, options) { }

I want to open a window. But I don't know how to do this. I already have made a window and this is stored in the mywindow.js file:

Ext.define('MyApp.view.MyWindow', {
    extend: 'Ext.window.Window',

    height: 334,
    width: 540,
    layout: {
        type: 'border'
    },
    title: 'Run report',

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'form',
                bodyPadding: 10,
                region: 'center'
            }]
        });

        me.callParent(arguments);
    }
});

Now what do i put in the onbuttonclick event?

Answer 1

Adding

Ext.create('MyApp.view.MyWindow').show();

To your button handler should do the trick.