基于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插件 cluetip 关键词注释
Jan 12 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 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 5.3新增魔术方法__invoke概述
2014/07/23 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PDO::errorInfo讲解
2019/01/28 PHP
实现js保留小数点后N位的代码
2014/11/13 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
详解package.json版本号规则
2019/08/01 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
Python实现简单状态框架的方法
2015/03/19 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python中的元类编程入门指引
2015/04/15 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python实现xlsx文件分析详解
2018/01/02 Python
python 解压pkl文件的方法
2018/10/25 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python编写打字训练小程序
2019/09/26 Python
python文字转语音的实例代码分析
2019/11/12 Python
Python关于反射的实例代码分享
2020/02/20 Python
如何使用repr调试python程序
2020/02/28 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
农业大学毕业生的个人自我评价
2013/10/11 职场文书
优秀员工评优方案
2014/06/13 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL