基于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 相关文章推荐
一个检测表单数据的JavaScript实例
Oct 31 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
js实现验证码功能
Jul 24 Javascript
vue setInterval 定时器失效的解决方式
Jul 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
PHP5 安装方法
2007/01/15 PHP
理解PHP中的stdClass类
2014/04/18 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
深入浅析python定时杀进程
2016/06/06 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Python生成词云的实现代码
2020/01/14 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
个人找工作求职简历的自我评价
2013/10/20 职场文书
毕业生自荐信的主要内容
2013/10/29 职场文书
后备干部考察材料
2014/02/12 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
师范生见习报告
2014/10/31 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
观后感的写法
2015/06/19 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers