基于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 类方法定义还是有点区别
Apr 15 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
详解webpack 多入口配置
Jun 16 Javascript
JavaScript监听键盘事件代码实现
Jun 03 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
smarty内置函数foreach用法实例
2015/01/22 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python使用新浪微博API发送微博的例子
2014/04/10 Python
python实现超简单端口转发的方法
2015/03/13 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
大学生活自我评价
2014/04/09 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
爱心捐款感谢信
2015/01/20 职场文书
公司会议开幕词
2016/03/03 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
Ruby处理YAML和json数据
2022/04/18 Ruby