基于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 相关文章推荐
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
Dec 21 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
vue中引用swiper轮播插件的教程详解
Aug 16 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简单获取文件扩展名的方法
2015/03/24 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
vue中监听返回键问题
2019/08/28 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python读取文件名并改名字的实例
2019/01/07 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
用python实现一个简单的验证码
2020/12/09 Python
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
写好自荐信的技巧
2013/11/08 职场文书
顶岗实习计划书
2014/01/10 职场文书
基层工作经历证明
2014/01/13 职场文书
《乡愁》教学反思
2014/02/18 职场文书
娱乐节目策划方案
2014/06/10 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
医生个人年终总结
2015/02/28 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
担保书怎么写 ?
2019/04/22 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server