ExtJS 4 Attaching a function to dynamically created popup window

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');

I am trying to center the dynamically created popup everytime the window is resized.But the viewport.on function takes the popup as data. This function accepts data only the first time. Even though another popup is created, it still does not get refreshed. The win inside the viewport.on function still stays the very first popup created. I am not able to figure out why it is not accepting the newer popup as data.Can someone please help me out?

Answer 1

You should use a managed listener that's tied to the lifecycle of your popup window, not to the lifecycle of the viewport. Otherwise, the listener will continue to be triggered even after the popup has been destroyed.

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

This code tells the popup to listen to the resize event of the viewport, but most importantly, to remove the listener when the popup component is destroyed.

Your code is attaching the listener to the viewport which means the listener won't be removed until the viewport is destroyed which is likely long after the popup window is destroyed. Thus, when your viewport fires its resize event, it's actually triggering stale listeners for old popups.

Side note, the last parameter to on/mon lets you bind this to whatever you want which can result in a cleaner lexical enclosure, but also avoid circular reference leaks that can happen when you try to reference this from the outer scope (e.g. var that = this anti-pattern).