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

Question

我正在与extjs designer 2合作。它工作正常，我设计了一个视口。它创建一些视图文件。第一个是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) {} 
}); 

与

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

我想开一个窗口。但我不知道该怎么做。我已经取得了一个窗口，这是存储在mywindow.js文件：

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

，现在我终于放什么onbuttonclick事件？

Answer 1

添加

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

为了您的按钮处理程序应该做的伎俩。