基于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 相关文章推荐
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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中使用redis队列操作实例代码
2013/02/07 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
原生js事件的添加和删除的封装
2014/07/01 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
python使用any判断一个对象是否为空的方法
2014/11/19 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
网络技术支持面试题
2013/04/22 面试题
海飞丝的广告词
2014/03/20 职场文书
城管大队整治方案
2014/05/06 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
博物馆观后感
2015/06/05 职场文书