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

每次调整窗口大小时，我都会尝试将动态创建的弹出窗口居中。但是viewport.on函数将弹出窗口作为数据。此功能仅在第一次接受数据。即使创建了另一个弹出窗口，它仍然无法刷新。 viewport.on函数内的win仍然是第一个创建的弹出窗口。我无法弄清楚为什么它不接受新的弹出窗口作为数据。有人可以帮帮我吗？

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

此代码告诉弹出窗口监听视口的resize事件，但最重要的是，在弹出组件被销毁时删除监听器。

您的代码将侦听器附加到视口，这意味着在销毁视口之前不会删除侦听器，这很可能在弹出窗口被销毁之后很久。因此，当您的视口触发其resize事件时，它实际上会触发旧弹出窗口的过时侦听器。

旁注，on / mon的最后一个参数允许您将this绑定到任何可能导致更清晰的词法封闭的任何内容，但也避免在尝试引用时this可能发生的循环引用泄漏1}}来自外部范围（例如var = =这种反模式）。

ExtJS 4将函数附加到动态创建的弹出窗口

1 个答案: