하나의 팝업 창만 열기 (패널)

Question

요청이 실패 할 때마다 호출되는이 함수는 onDisplayError입니다. 즉, 사용자가 저장 버튼을 누르고 3 개의 요청이 실패하면 현재 3 개의 팝업 메시지가 표시됩니다. 내 목표는이 함수는 내 팝업 창이 이미 열려 있는지 확인합니다. 그 다음 내가 내 이미 열려있는 창에 오류를 추가 할 경우 그렇지 않으면 문제는 내가 아직 여러 팝업을 얻고 있다는 것입니다 이것은 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; 
    } 

입니다이 오류 팝업에게

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(); 
     } 
    }, 

를 열어야합니다 표시됩니다. 그 문제는 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 첫 번째 오류가 될 수있는 오류를 (추가 할 로직을 포함 할뿐만 아니라한다을 두 번째 또는 세 번째)를 패널의 오류 목록에 추가하십시오.

Answer 2

Ext.create를 사용하면 항상 해당 클래스의 새 인스턴스가 만들어집니다.

참조 구성을 사용하여 패널에 대한 고유 참조를 만들 수 있습니다. 그런 다음 컨트롤러에서 this.lookupReference ('referenceName')를 사용하여 패널이 이미 있는지 확인하고 show()를 확인합니다.

닫을 때 패널이 파손되지 않도록 panel에서 'hide'를 설정해야합니다.

그렇지 않으면, 당신은 컨트롤러 패널에 대한 참조를 저장할 수 있습니다

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

그런 다음, (this.errorPanel) this.errorPanel.show는() 경우는 다른 this.errorPanel = Ext.create ...