如何正确调用Ext JS覆盖面板？

Question

我希望从Main throught控制器的按钮调用2个formpanel。但是添加菜单组件后，我将面临下一个事件：如果我选择第一个叠加层，那么当我也选择第二个叠加层时，它将出租。相反，当我选择第二时。当我尝试调用第一个叠加层时，它将出租。所以发生了什么事？ “ this”有问题吗？

我的主按钮：

...
    items:[{
                text:'+Cut',
                ui:'action',
                cls: 'grbuttons',
                height: 35,
                width: 150,
                margin:2,
                handler:'cutForms'
            },{
                text:'+Agree',
                ui:'action',
                cls: 'grbuttons',
                margin:2,
                height: 35,
                width: 145,
                handler: 'agreeForm'
            },
...

我的控制器代码：

...
    cutForms: function() {
        if (!this.overlay) {
            this.overlay = Ext.Viewport.add({
                xtype: 'foresto-cutarea',
                scrollable: true,
                renderTo: Ext.getBody(),
                height:'55%',
                margin: '208 98 200 215',
                modal: true,
                hideOnMaskTap: true,
                showAnimation: {
                    type: 'popIn',
                    duration: 250,
                    easing: 'ease-out'
                },
                hideAnimation: {
                    type: 'popOut',
                    duration: 250,
                    easing: 'ease-out'
                },
                centered: true,
                //width: Ext.filterPlatform('ie10') ? '100%' : (Ext.os.deviceType == 'Phone') ? 260 : 400,
                //maxHeight: Ext.filterPlatform('ie10') ? '100%' : (Ext.os.deviceType == 'Phone') ? 220 : 400,
                scrollable: true

            });
        }

        this.overlay.show();
    },

    agreeForm: function() {
        if (!this.overlay) {
            this.overlay = Ext.Viewport.add({
                xtype: 'foresto-agreement',
                renderTo: Ext.getBody(),
                height:'82%',

                modal: true,
                hideOnMaskTap: true,
                showAnimation: {
                    type: 'popIn',
                    duration: 250,
                    easing: 'ease-out'
                },
                hideAnimation: {
                    type: 'popOut',
                    duration: 250,
                    easing: 'ease-out'
                },
                centered: true,
                //width: Ext.filterPlatform('ie10') ? '100%' : (Ext.os.deviceType == 'Phone') ? 260 : 400,
                //maxHeight: Ext.filterPlatform('ie10') ? '100%' : (Ext.os.deviceType == 'Phone') ? 220 : 400,
                scrollable: true

            });
        }

        this.overlay.show();
    },
...

我的表单代码示例：

Ext.define('Foresto.view.forms.Agreement', {
    extend: 'Ext.form.Panel',
    title: 'Договор',
    header: {
       cls: 'hdr2'

    },
    scrollable: true,

    scope: this,
    xtype: 'foresto-agreement',
    id:'foresto-agreement',
    defaults: {
        xtype: 'textfield',
        labelWrap: true,
        required: true, // *
        afterLabelTextTpl: [
            '<span style="color:red;font-weight:normal" data-qtip="Required">*</span>'
        ]
    },
    items: [{...

那么如何使用很少或很多（不仅是一个）覆盖面板？如何解决这个问题？