基于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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
JS解析XML实例分析
Jan 30 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
原生js+css实现tab切换功能
Sep 17 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
DedeCms模板安装/制作概述
2007/03/11 PHP
服务器web工具 php环境下
2010/12/29 PHP
php类自动加载器实现方法
2015/07/28 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
使用Python实现一个简单的项目监控
2015/03/31 Python
使用Python设计一个代码统计工具
2018/04/04 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python读取文本中的坐标方法
2018/10/14 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
自考自我鉴定范文
2013/10/30 职场文书
五年级科学教学反思
2014/02/05 职场文书
业务员简历自我评价
2014/03/06 职场文书
英语教研活动总结
2014/07/02 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
nginx实现动静分离的方法示例
2021/11/07 Servers