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

Open only one popup window (panel)

本文关键字：面板 一个 窗口      更新时间：2023-09-26

所以我有这个函数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。如果您需要任何其他信息，请告诉我，我将提供。

您可以为组件定义提供一个特殊的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应该包含您的逻辑来附加一个错误(可能是第一个错误以及第二个或第三个错误)到面板中的错误列表。

使用Ext.create总是会创建一个该类的新实例。

您可以使用引用配置来创建对面板的唯一引用。然后，在控制器中使用this.lookupReference('referenceName')来检查面板是否已经存在，并使用show()。

你还必须在面板中设置closeAction: 'hide'，以避免关闭时面板被破坏。

否则，您可以在控制器

中保存对面板的引用

。errorPanel = Ext.create(' myapp .view.pop .error. error ')。面板"…

然后，if (this.errorPanel) this.errorPanel.show();其他的。errorPanel = Ext.create…

相关文章：