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

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

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

您还必须设置closeAction：＆＃39;隐藏＆＃39;在面板中，以避免面板在关闭时被破坏。

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

this.errorPanel = Ext.create（＆＃39; myApp.view.popup.error.Panel＆＃39; ....

然后，if（this.errorPanel）this.errorPanel.show（）; 否则this.errorPanel = Ext.create ...

Answer 2

您可以为组件定义提供特殊的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应该包含你的逻辑来向列表追加错误（可能是第一个错误以及第二个或第三个错误）小组中的错误。

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

2 个答案: