javascript - 只打开一个弹出窗口(面板)

Question

所以我有这个函数 onDisplayError ，如果请求失败，每次都会调用它。这意味着如果用户按下保存按钮并且 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;
    }

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

Answer 1

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

Ext.define('myApp.view.popup.error.Panel', {
    extend: 'Ext.panel.Panel',
    xtype:'myxtype'

然后你可以得到一个非常简洁的 onDisplayError 函数:

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

面板的 initComponent 函数应该初始化一个空窗口，appendError 应该包含您附加错误的逻辑(可能是第一个错误，也可能是第二个或第三个)到面板中的错误列表。