微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 如何在extjs中单击按钮后打开窗口

我正在使用extjs设计师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事件中放了什么?

解决方法:

添加

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

你的按钮处理程序应该做的伎俩.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐