基于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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
JS判定是否原生方法
Jul 22 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
jQuery知识点整理
Jan 30 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 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作为Shell脚本语言使用
2006/10/09 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
python中list循环语句用法实例
2014/11/10 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
车间班组长岗位职责
2013/11/13 职场文书
企业精神口号
2014/06/11 职场文书
教师求职信怎么写
2015/03/20 职场文书
学校教学工作总结2015
2015/05/19 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
讲解MySQL增删改操作
2022/05/06 MySQL