基于ExtJs在页面上window再调用Window的事件处理方法


Posted in Javascript onJuly 26, 2017

今天在开发Ext的过程中遇到了一个恶心的问题,就是在ext.window页面,点击再次弹出window时,gridpanel中的store数据加载异常,不能正常被加载,会出现缓存,出现该问题,是因为window窗口弹出时,两个window同时存在,并且在两个window交替使用时,需要先将一个窗口关闭,关闭时,会对window的缓存进行清理,这样就能保证store数据的正确加载。分享给大家,供参考。

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交替使用时,需要交替关闭,这样才能保证页面的正常。ExtJs不建议弹出多window同时使用,当然,如果能解决好ExtJs之间的数据交互,也未必不可以。

以上这篇基于ExtJs在页面上window再调用Window的事件处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
js实现图片实时时钟
Jan 15 Javascript
Node与Python 双向通信的实现代码
Jul 16 Javascript
详解 TypeScript 枚举类型
Nov 02 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 #Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 #Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 #Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 #Javascript
关于Stream和Buffer的相互转换详解
Jul 26 #Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 #Javascript
JS数组操作中的经典算法实例讲解
Jul 26 #Javascript
You might like
php与php MySQL 之间的关系
2009/07/17 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
php实现快速排序法函数代码
2012/08/27 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php实现短信发送代码
2015/07/05 PHP
php提高网站效率的技巧
2015/09/29 PHP
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
python将unicode转为str的方法
2017/06/21 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
【python】matplotlib动态显示详解
2019/04/11 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
python第三方库学习笔记
2020/02/07 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
光电信息专业应届生求职信
2013/10/07 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
自我鉴定怎么写
2013/12/05 职场文书
不假外出检讨书
2014/01/27 职场文书
卫生标语大全
2014/06/21 职场文书
介绍信怎么写
2015/05/05 职场文书
入党介绍人考察意见
2015/06/01 职场文书
孔繁森观后感
2015/06/10 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android