Extjs弹出框的异步执行| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

Extjs弹出框的异步执行

## Extjs弹出框的异步执行
### 问题提出

Extjs 的弹出框是异步执行的，也就是说，弹出对话框之后， 立即执行后面的代码了。
而对于window的弹出框来说， 不管是alert或是confirm 都是同步阻塞执行， 需要等待对弹出框进行点击操作之后再执行接下来的代码。

### 实例说明
以下面的代码为例，比对一下window和Extjs的弹出框执行差别。
两条alert语句，一条显示 “Alert Message”, 接下来一条显示 "after Alert".
```html
DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
Test Page
function showWindowAlert(){
	window.alert('Alert Message');
	afterAlert();
}
function showExtAlert(){
	Ext.Msg.alert('Title', 'Alert Message', Ext.emptyFn);
	afterAlert();
}
function afterAlert(){
	alert("after Alert");
}	
```
    
    
执行结果可以发现， window的alert是一条一条显示， 而Extjs 是一次显示两条

### 解决方案

其实， Extjs 要异步显示也不难，只需要对showExtAlert方法简单调整就可以了
```html
functionshowExtAlert(){
Ext.Msg.alert('Title', 'Alert Message', function(){
afterAlert();
	});
}

```
对于confirm或是其他方法的处理也是类似的。基本上没有什么问题。
但是实际场景的时候，却无法进行这样的处理，特别是对于一些事件方法的处理时
gantt.attachEvent("onBeforeTaskDrag", function(id, mode, task){
```html
if(id>10)
    {
returntrue;
    }else{
returnfalse; 
    }   
});
```

要在这个地方插入一个confirm 来做选择的话，使用window confirm 可以达成， 
但是使用Extjs Confirm 的话，是完全没有作用的。 所以如果试图以以下的代码达到效果， 就完全错误了。
```html
gantt.attachEvent("onBeforeTaskDrag", function(id, mode, task){
Ext.Msg.confirm("Title","Message",function(btnid){
if(btnid=="yes")
    	{
returntrue;
    	}else{
returnfalse;
    	}
    })   
});
```

后记

那是否有什么好的解法呢？ 就我个人目前的研究来说是没有

要么使用window的弹出框方法， 要么不使用弹出框。

要尝试看看其他前端组件的弹出框方式， 基本上和Extjs 类似

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

Extjs弹出框的异步执行

网站导航