基于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给元素绑定click事件多次执行的解决方法
May 29 Javascript
12306验证码破解思路分享
Mar 25 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
js格式化时间的简单实例
Nov 27 Javascript
Node.js的特点详解
Feb 03 Javascript
js实现动态显示时间效果
Mar 06 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
node.js 发布订阅模式的实例
Sep 10 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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 如何禁用eval() 函数实例详解
2016/12/01 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
python实现复制整个目录的方法
2015/05/12 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python tkinter界面居中显示的方法
2018/10/11 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
python日志模块logbook使用方法
2019/09/19 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
异常和异常类的概念
2014/09/12 面试题
世界经理人咨询有限公司面试
2014/09/23 面试题
妈妈的账单教学反思
2014/02/06 职场文书
关爱留守儿童标语
2014/06/18 职场文书
公司庆典欢迎词
2015/01/26 职场文书
师范生小学见习总结
2015/06/23 职场文书
网吧管理制度范本
2015/08/05 职场文书