基于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 相关文章推荐
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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 return语句的另一个作用
2014/07/30 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
JSON辅助格式化处理方法
2013/03/26 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
axios基本入门用法教程
2017/03/25 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
django rest framework之请求与响应(详解)
2017/11/06 Python
Python生成器以及应用实例解析
2018/02/08 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
python安装scipy的步骤解析
2019/09/28 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
公司活动策划方案
2014/01/13 职场文书
学生自我评价范文
2014/02/02 职场文书
药品采购员岗位职责
2014/02/08 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
开会通知
2015/04/20 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers
keepalived + nginx 实现高可用方案
2022/12/24 Servers