ExtJs中Window调用Window事件处理方法

作者：技术拾光

时间：2026-06-11

在ExtJs开发中，Window嵌套调用时数据加载异常是一个常见问题。当主页面通过Window弹出子窗口，子窗口再次弹出Window时，第二个Window中的GridPanel数据可能出现显示异常或缓存未更新的情况。产生这一问题的直接原因是：两个Window同时存在时，交替操作未能清理前一个窗口的缓

文章目录

问题根源：缓存未清理导致数据异常

从技术层面分析，ExtJs中Window嵌套使用时，若未正确管理窗口生命周期，前一个窗口的缓存数据会残留在内存中。当第二个Window加载数据时，Store可能直接读取缓存而非发起新请求。开发者需要明确区分两个Window的数据作用域，并在每次弹窗前执行清理操作。

ExtJs中Window调用Window事件处理方法

解决方案：弹窗前关闭旧窗口并销毁缓存

在每次打开新Window之前，先关闭之前打开的Window并执行销毁操作。以下代码展示了关键的清理逻辑，黄色背景部分即为需要添加的缓存清理代码：

var actInfoWindow2;
function showCallFlowInfoWindow(flowid, actId) {
  var actWindowHeight1 = window.innerHeight
  || document.documentElement.clientHeight
  || document.body.clientHeight;
  if(null != upldWin && undefined != upldWin && "" != upldWin){
    upldWin.close();
  }
  // 异常活动模型
  Ext.define('callFlowModel', {
    extend: 'Ext.data.Model',
    fields: [{name: 'instance', type: 'string'},
         {name: 'flowName', type: 'string'},
         {name: 'prjName', type: 'string'},
         {name: 'startTime',  type: 'String'}]
  });
   
  callFlowStore = Ext.create('Ext.data.Store', {
    autoLoad : true,
    model : 'callFlowModel',
    proxy : {
      type : 'ajax',
      url : 'subflow.do',
      reader : {
        type : 'json',
        root : 'callFlowList',
        totalProperty : 'total'
      }
    }, 
    listeners: { 
      'beforeload': function (store, op, options) {
        var params = { 
          //参数 
          flowId : flowid,
          id : actId
        }; 
        Ext.apply(store.proxy.extraParams, params); 
      } 
    } 
  });
   
  // 绑定数据模型flowColumns
  var callFlowColumns = [
    { text: '实例名', dataIndex: 'instance', width:174 },
    { text: '工程名', dataIndex: 'prjName',width: 174 },
    { text: '工作流名', dataIndex: 'flowName',width: 174 },
    { text: '启动时间', dataIndex: 'startTime',width: 174 }
  ];
 
  callFlowGrid = Ext.create('Ext.grid.Panel', {
    region : 'center',
    //tbar:querybar,
    id:'callFlowList',
    autoScroll : false,
    border:false,
    //columnLines : true,
    //selModel:selModel,
    //bbar : pageBar,
    columns : callFlowColumns,
    store : callFlowStore,
    loadMask : {
      msg : " 数据加载中，请稍等 "
    }
  });
   
  if (actInfoWindow2 == undefined || !actInfoWindow2.isVisible()) {
    actInfoWindow2 = Ext.create('Ext.window.Window', {
      id : 'actInfoWindow2',
      title : '活动信息详情',
      modal : true,
      closeAction : 'destroy',
      constrain : true,
      autoScroll : true,
      width : 700,
      height : actWindowHeight1 - 300,
      items : [ callFlowGrid ],
      listeners:{
         beforeclose:function(){
           actInfoWindow2.destroy();
         }
      }
    });
  }
  actInfoWindow2.show();
}
if(null != upldWin && undefined != upldWin && "" != upldWin){

  upldWin.close();
}

核心清理逻辑说明

问题就出在少了上面这段黄色背景的清理代码。两个Window交替使用时，必须在打开新窗口之前关闭旧窗口，并显式调用 close() 或 destroy() 方法。这一操作确保数据Store重新加载时能够获取最新内容，而非读取缓存中的过期数据。

为什么需要显式调用close或destroy

ExtJs框架中，Window对象的默认关闭行为仅隐藏窗口，而非销毁窗口实例。如果不显式调用 close() 或 destroy()，窗口及其绑定的Store、GridPanel等组件会继续驻留在内存中。当再次打开新窗口时，系统可能复用旧窗口的Store实例，从而读取到缓存数据。

开发实践中的注意事项

虽然ExtJs并不推荐同时打开多个Window，但如果业务场景确实需要嵌套弹窗，数据交互层面的清理工作必须到位。建议开发者在设计阶段就明确每个Window的生命周期，避免因缓存问题导致数据展示异常。缓存问题可能反复出现，且表现形式多样，例如数据显示不全、数据为旧版本、GridPanel加载超时等。

总结与建议

以上是在页面上Window再调用Window时，处理事件和数据加载的一个常见坑点。希望这个实战经验能帮助开发者快速定位并解决ExtJs开发中的数据缓存问题，提升页面交互的稳定性和用户体验。在实际项目中，建议结合业务场景制定统一的窗口管理策略，减少类似问题的发生。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›

图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›

上一篇：美官员称伊朗无人机致美军直升机坠毁未确认蓄意攻击下一篇：Angular outlet页面布局示例详解