Javascript 仅打开一个弹出窗口（面板）

所以我有一个displayerror函数，如果请求失败，每次都会调用这个函数。这意味着，如果用户按下保存按钮，3个请求失败，我当前会收到3条弹出消息。我的目标是这个函数检查我的弹出窗口是否已经打开。如果是，那么我将在我已经打开的窗口中附加错误，否则它将打开此错误弹出窗口

onDisplayError: function (response, message) {
        var errorPanel = Ext.create('myApp.view.popup.error.Panel',{
            shortMessage: message,
            trace: response
        });
        if(errorPanel.rendered == true){
            console.log('Do some other stuff');
        }else{
            errorPanel.show();
        }
    },

这是Panel.js

Ext.define('myApp.view.popup.error.Panel', {
    extend: 'Ext.panel.Panel',
    requires: [
        'myApp.view.popup.error.PanelController'
    ],
    controller: 'myApp_view_popup_error_PanelController',

    title: 'Fail',
    glyph: 'xf071@FontAwesome',

    floating: true,
    draggable: true,
    modal: true,
    closable: true,
    buttonAlign: 'center',
    layout: 'border',
    shortMessage: false,
    width: 800,
    height: 200,

    initComponent: function() {
        this.items = [
            this.getMessagePanel(),
            this.getDetailsPanel()
        ];
        this.callParent(arguments);
    },

    getMessagePanel: function() {
        if(!this.messagePanel) {
            var message = this.shortMessage;
            this.messagePanel = Ext.create('Ext.panel.Panel', {
                bodyPadding: 5,
                height: 200,
                region: 'center',
                border: false,
                html: message
            });
        }
        return this.messagePanel;
    },

    getDetailsPanel: function() {
        if(!this.detailsPanel) {
            this.detailsPanel = Ext.create('Ext.panel.Panel', {
                title: 'Details',
                hidden: true,
                region: 'south',
                scrollable: true,
                bodyPadding: 5,
                height: 400,
                html: '<pre>' + JSON.stringify(this.trace, null, 4) + '</pre>'
            });
        }
        return this.detailsPanel;
    }

Ext.define（'myApp.view.popup.error.Panel'{
扩展：“Ext.panel.panel”，
要求：[
'myApp.view.popup.error.PanelController'
],
控制器：“myApp\u视图\u弹出窗口\u错误\u面板控制器”，
标题：“失败”，
铭文：'xf071@FontAwesome',
浮动：是的，
真的，
莫代尔：是的，
closable:是的，
buttonAlign:'中间'，
布局：“边框”，
短消息：错，
宽度：800，
身高：200，
initComponent:function（）{
此项。项目=[
这个.getMessagePanel（），
this.getDetailsPanel（）
];
this.callParent（参数）；
},
getMessagePanel:函数（）{
如果（！this.messagePanel）{
var message=this.shortMessage；
this.messagePanel=Ext.create（'Ext.panel.panel'{
车身衬垫：5，
身高：200，
地区：'中心'，
边界：错，
html：消息
});
}
返回此.messagePanel；
},
getDetailsPanel:函数（）{
如果（！this.detailsPanel）{
this.detailsPanel=Ext.create（'Ext.panel.panel'{
标题:"详情",，
隐藏：是的，
地区：'南'，
可滚动：对，
车身衬垫：5，
身高：400，
html:''+JSON.stringify（this.trace，null，4）+''
Ext.define('myApp.view.popup.error.Panel', {
    extend: 'Ext.panel.Panel',
    xtype:'myxtype'

});
}
返回此.detailsPanel；
}

---

问题是我仍然会显示多个弹出窗口。我认为问题在于var errorPanel失去了引用，因此它无法检查此弹出窗口（面板）是否已打开。如何达到预期效果？我正在使用extjs 6。如果您需要任何其他信息，请告诉我，我将提供。

使用Ext.create将始终创建该类的新实例

您可以使用引用配置创建对面板的唯一引用。 然后，在控制器中使用此.lookupReference（'referenceName'）检查面板是否已经存在，并显示（）

您还必须在面板中设置closeAction:“隐藏”，以避免关闭时面板被破坏

否则，可以在控制器中保存对面板的引用

this.errorPanel=Ext.create（'myApp.view.popup.error.Panel'

然后，如果（this.errorPanel）this.errorPanel.show（）；

---

否则，this.errorPanel=Ext.create…

使用Ext.create将始终创建该类的新实例

您可以使用引用配置创建对面板的唯一引用。 然后，在控制器中使用此.lookupReference（'referenceName'）检查面板是否已经存在，并显示（）

您还必须在面板中设置closeAction:“隐藏”，以避免关闭时面板被破坏

否则，可以在控制器中保存对面板的引用

this.errorPanel=Ext.create（'myApp.view.popup.error.Panel'

然后，如果（this.errorPanel）this.errorPanel.show（）；

---

否则this.errorPanel=Ext.create…

您可以为组件定义提供一个特殊的

xtype

onDisplayError: function (response, message) {
    var errorPanel = Ext.ComponentQuery.query('myxtype')[0] || Ext.widget('myxtype');
    errorPanel.appendError(message, response)
    errorPanel.show();
},

然后你可以有一个非常精简的显示错误函数：

---

面板的

initComponent

函数应该初始化一个空窗口，并且

appendError

应该包含将错误（可能是第一个错误，也可能是第二个或第三个错误）附加到面板错误列表中的逻辑。

您可以为组件定义提供一个特殊的

xtype

onDisplayError: function (response, message) {
    var errorPanel = Ext.ComponentQuery.query('myxtype')[0] || Ext.widget('myxtype');
    errorPanel.appendError(message, response)
    errorPanel.show();
},

然后你可以有一个非常精简的显示错误函数：

---

面板的

initComponent

函数应该初始化一个空窗口，

appendError

应该包含将错误（可能是第一个错误，也可能是第二个或第三个错误）附加到面板错误列表中的逻辑。

太好了！谢谢！太好了！谢谢！