ExtJS 4 Закрепление функции динамически создается всплывающее окно

Question

var modalPanel = Ext.getCmp('fileGridPopup'+selectedProjectId); 
      var win=null;    
      if (modalPanel){ 
       modalPanel.center(); 
       modalPanel.show();  
      } 
      else{ 
       win = Ext.create('Ext.window.Window', {    
        modal:true, 
        id: 'fileGridPopup'+selectedProjectId, 
        xtype: 'fileGridPopup'+selectedProjectId, 
        title: tr.get('jobNo'), 
        renderTo: Ext.getBody(), 
        scrollable: true, 
        layout:'fit', 
        height: '100%', 
        width: 1000, 
        resizable: false, 
        closeAction :'close', 
        constrain:true,  
        draggable:false, 
        items:[ 
        { 
         xtype:'panel', 
         layout:'border', 
         itemId:'fileMainPanel'+selectedProjectId,    
        items:[ 
         { 
          xtype: 'tabpanel' , 
          activeTab: 0, 
          region:'center', 
          itemId: 'filePanel'+selectedProjectId,       
          items: [ 
           { 
            xtype: 'filesViewport', 
            title: 'Files', 
            itemId: selectedProjectId 
           } 
          ], 
          listeners: 
          { 
           tabchange: function(panel, newTab, oldTab) { 
            var newTabIndex = Ext.getCmp('fileGridPopup'+selectedProjectId).getComponent('filePanel'+selectedProjectId).items.indexOf(newTab); 
            if(newTabIndex == 0){ 
             var store = Ext.getStore('Files'); 
             store.proxy.url = serverLocation + 'GetFileData?projectId=' + selectedProjectId + '&check=false'; 
             store.reload(); 
             Ext.getCmp('documentGrid').getView().refresh(); 
            }          
            activeTabIndex = newTabIndex - 1; 
           } 
          }, 
         }, 
         {        
          xtype: 'button', 
          region:'south', 
          text : 'Cancel', 
          itemId: 'assignProjectCancelBtn', 
          width:70, 
          height:25, 
          margin: '5 5 5 900', 
          handler:function(){ 
           remove(); 
           file_name = []; 
           file_version = []; 
           file_fileid = []; 
           file_filePath = []; 
           // if() 
           refMainPage.unlockSection(); 
           Ext.getCmp('fileGridPopup'+selectedProjectId).getComponent('fileMainPanel'+selectedProjectId).getComponent('filePanel'+selectedProjectId).getComponent(selectedProjectId).getComponent('upload').destroy(); 
           win.close(); 
          } 
         }  
        ], 
       }], 
        listeners: 
        { 
         beforeclose: function(){ 
          if(event.keyCode!==27){ 
           remove(); 
           file_name = []; 
           file_version = []; 
           file_fileid = []; 
           file_filePath = []; 

           Ext.getCmp('fileGridPopup'+selectedProjectId).destroy(); 
           Ext.ComponentQuery.query('#uploadPopup')[0].destroy(); 
           Ext.getStore('Project').reload(); 
          } 
          else{ 
           event.preventDefault(); 
           return false; 
          } 
         } 
        } 
       }); 
       win.center();  
       win.show();   
       } //else loop ends 
            var viewPort = Ext.ComponentQuery.query('viewport')[0]; 
            viewPort.on('resize', function(vp, width,height) { 
            var winWidth = win.width;   
            var left = (width -winWidth)/2;    
            win.setPosition(left,height); 
            }); 

      year = tr.get('year'); 
      formType = tr.get('formType'); 
      projectName = tr.get('jobNo'); 

Я пытаюсь центрирования динамически созданного всплывающего окна каждый раз, когда окно resized.But функция viewport.on занимает всплывающее окно в виде данных. Эта функция принимает данные только в первый раз. Несмотря на то, что создано другое всплывающее окно, оно по-прежнему не обновляется. Победа внутри функции viewport.on по-прежнему остается самым первым всплывающим меню. Я не могу понять, почему он не принимает новое всплывающее окно как данные. Может кто-то, пожалуйста, помогите мне?

Answer 1

Вы должны использовать managed listener, привязанный к жизненному циклу вашего всплывающего окна, а не к жизненному циклу окна просмотра. В противном случае слушатель будет продолжать запускаться даже после того, как всплывающее окно будет уничтожено.

win.mon(viewport, 'resize', function(vp, width, height) { 
    var winWidth = this.width;   
    var left = (width - winWidth)/2;    
    this.setPosition(left, height); 
}, win); 

Этот код указывает всплывающее окно, чтобы прослушать изменения размера события окна просмотра, но самое главное, чтобы удалить слушателя, когда всплывающий компонент разрушается.

Ваш код прикрепляет слушателя к окну просмотра, что означает, что слушатель не будет удален до тех пор, пока не исчезнет окно просмотра , которое, вероятно, долгое время после того, как всплывающее окно будет уничтожено. Таким образом, когда ваш viewport запускает событие изменения размера, он фактически запускает устаревших слушателей для старых всплывающих окон.

Примечание стороны, последний параметр включения/мес позволяет связать this все, что вы хотите, что может привести к более чистому лексическому корпусу, но и избежать циклических эталонных утечек, которые могут произойти, когда вы пытаетесь ссылаться this из внешней области (например, var that = this anti-pattern).