有关于在Extjs4环境中,window窗口下的messageBox弹窗的bug以及解决方案
来源:互联网 发布:重庆宝钻资产管理 知乎 编辑:程序博客网 时间:2024/06/10 15:51
在使用Extjs4进行前端开发时发现,当在弹出的窗口(Ext.window.Window)中使用提示框(Ext.window.MessageBox)时候,会出现bug,即在window的配置使用了modal:true(蒙版效果,仅能对当前的window层进行操作)时,在使用Ext.window.MessageBox.wait(),以及Ext.window.MessageBox.confirm()之后再使用Ext.window.MessageBox.alert()会被隐藏到当前window层后方(蒙版效果),而不使用wait(),或者confirm()则可以正常显示,且alert的消息框默认也是有modal效果的
场景说明:
1.首先,一个附件上传的组件,该组件通过前台form提交附件到后台java处理并上传到ftp,上传过程中有个等待时间,调用了等待对话框(form提交的waitMsg属性也是同样效果)
Ext.window.MessageBox().wait('提示','正在上传...');//form.submit();//提交form表单//表单提交完成,后台返回json根据json判断是否上传成功,若成功:Ext.window.MessageBox().alert('提示','文件***已经上传成功',function(){/*此处是上传成功后将附件的信息返回到UI上,我的是加载到grid上去*/});
2.在UI上会显示已经上传的附件列表,通过columnAction加入了两列分别是下载附件与删除附件,删除附件是一个确认对话框:
Ext.window.MessageBox().confirm('确认删除','确认删除当前选中附件?',function(id){ if(id=='yes'){ delete(); //执行删除 Ext.window.MessageBox().alert('删除结果','删除成功',function(){/*删除UI上的附件store*/}); }else if(id=='no'){ //取消选择 }});2.问题表现:
①使用了waitMsg后,上传成功的提示框会一闪而过到当前window层后方(再次强调,window设置了modal为true的情况下),不使用waitMsg等待进度框则可以正常弹出提示框;
②使用了confirm对话框确认删除后,删除成功与否的提示框也会被隐藏到当前window层后方,不使用确认对话框则可以正常显示删除成功与否的提示框;
3.在runjs上写了一个demo:http://sandbox.runjs.cn/show/vijnwoug,可以在上面看到效果(确认对话框点击后的提示框被隐藏到window后,拖动window后可以看见蒙版后的alert窗口)
4.解决过程:
在解决waitMsg时使用close发现可以解决,但是到了confirm却又不行了,无力研究具体原因,现在只是找出了替代的办法,即加入一个延时函数,具体原因未知,如有大神路过,也可探讨
<pre name="code" class="javascript"><pre name="code" class="javascript">/*此种方法可以解决2.①中所述的问题*/var waitM = new Ext.window.MessageBox();
waitM.wait('正在上传...');
//表单提交,返回附件上传成功与否
Ext.Msg.alert('上传成功!','文件***已经成功上传到服务器');
waitM.close();//Extjs4.1默认的closeAction是destroy,4.2的是hide,我的开发环境是4.2/*用同样的方法对confirm窗口进行操作,并不起效*///偶然发现加入一个延时,窗口却可以显示了Ext.MessageBox.confirm('确认删除', '确认删除选中附件吗?', function(id) { var task = new Ext.util.DelayedTask(function() { if (id == 'yes') { me.deleFileFromFtp(delFilePaths);<pre name="code" class="javascript"> }});
task.delay(10);//延时的时间不知需要多少,1ms无效果,10以及以上的延时任务时有效
<pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript">});
- 有关于在Extjs4环境中,window窗口下的messageBox弹窗的bug以及解决方案
- extjs4 多个模态 modal 窗口在IE8下第二个模态窗口及 Ext.MessageBox被modal窗口被遮盖的解决方法
- 有关于面试常遇到的问题回答,以及解决方案。
- extjs4.2 -- 关于window窗口的问题
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- Window 中窗口的层次关系以及窗口的属性
- 冉有-支付宝钱包的研发挑战和最佳实践
- 缓冲区 readLine 模拟缓冲区 LineNumberReader 模拟行号装饰
- android:gravity与android:layout_gravity的区别
- 添加 ico 图标
- 开始开发 Dashboard Widgets,第2章,读书笔记
- 有关于在Extjs4环境中,window窗口下的messageBox弹窗的bug以及解决方案
- 最好用的 Eclipse 插件收藏
- JAVA 大数(BigInteger) 归纳总结 .
- 被忽视的TWaver功能(1)
- 应用shellcode的简单示例
- Codeforces 363C. Fixing Typos
- 如何测试一个网页登陆界面--转
- 杨辉三角
- [转]Android 微信SDK分享功能中的最全过程步骤分析