(Ext基础篇) 弹出窗口

                           从外观上来讲，浏览器自带的alert、confirm、prompt等对话框并不好看，而且配置也不灵活。诸如按钮的添加、删除、以及修改按下按钮所触发的事件等操作都非常难以执行，而在EXT的msgbox里都能实现，而且外观相当漂亮，本节将详细介绍EXT中的弹出窗口。

                           Ext.MessageBox为我们提供了弹出提示框的简单方法，使用它提供的alert、confirm、prompt等对话框完全可以代替浏览器原生的alert、confirm、prompt邓对话框，除此之外，Ext.MessageBox还提供了诸如进度条等更多的功能

1、Ext.MessageBox.alert()的使用方法和效果图(图1所示) 
 
view plaincopy to clipboardprint? 
Ext.MessageBox.alert('标题','内容',function(btn){    
    alert('你刚刚点击了'+btn);    
});   
            Ext.MessageBox.alert('标题','内容',function(btn){ 
                alert('你刚刚点击了'+btn); 
            }); 
 
  
 
图1 alert效果图 
 
2、Ext.MessageBox.confirm()的使用方法和效果图(如图2所示) 
 
view plaincopy to clipboardprint? 
Ext.MessageBox.confirm('选择框','你到底选择Yes还是No?',function(btn){    
                alert('您刚刚选择了'+btn);    
            });   
Ext.MessageBox.confirm('选择框','你到底选择Yes还是No?',function(btn){ 
                alert('您刚刚选择了'+btn); 
            }); 
 
  
 
图2 confirm效果图 
 
3、Ext.MessageBox.prompt()的使用方法和效果图(如图3所示) 
 
view plaincopy to clipboardprint? 
Ext.MessageBox.prompt('输入框','随便输入一些东西',function(btn,text){    
    alert('你刚刚点击了'+btn+", 刚刚输入了"+text);    
});   
            Ext.MessageBox.prompt('输入框','随便输入一些东西',function(btn,text){ 
                alert('你刚刚点击了'+btn+", 刚刚输入了"+text); 
            }); 
 
  
 
图3 prompt效果图 
 

对话框的更多设置

 1、可以输入多行的输入框

Ext.MessageBox.show({ 
                title:'多行输入框', 
                msg:'可以输入多行:', 
                width:300, 
                buttons:Ext.MessageBox.OKCANCEL, 
                multiline:true, 
                fn:function(btn,text){ 
                    alert('你刚刚点击了 ',btn+",刚刚输入了 "+text); 
                } 
            }); 

相关属性设置：

buttons:表示对话框中的按钮，Ext.MessageBox已经为我们预设定好了按钮的位置。我们这里使用的是Ext.MessageBox.OKCANCEL,即显示OK和cancel两个按钮

Multilint：表示我们可以输入多行内容，设置为true之后便自动生成一个textarea.

fn:表示回调函数，它会在用户关闭对话框是接受或处理我们需要的结果。

2、自定义对话框按钮

我们可以使用Ext.Message.show()设置对话框中按钮的样式，如下面的代码所示

Ext.MessageBox.show({ 
                title:'自定义对话框的按钮', 
                msg:'从三个按钮中选择一个', 
                buttons:Ext.MessageBox.YESNOCANCEL, 
                fn:function(btn){ 
                    alert('您刚刚点击了 '+btn); 
                } 
            }); 

 

相关属性设置：buttons参数设置了Ext.MessageBox.YESNOCANCEL,这样在弹出的对话框中可以看到三个按钮。YESNOCANCEL是定义在EXT中的一个变量，它的值是{yes:true,no:true,cancel:true}.

3、进度条

进度条经常用于需要用户等待某一操作完成的场景，当执行一些十分耗时的操作时，我们需要用它来提示用户耐心等待，Ext.MessageBox为我们提供了默认的进度条，只要将progress参数设置为true，对话框中就会出现进度条，如下面的代码所示：

Ext.MessageBox.show({    
                title:'请等待',    
                msg:'读取数据中……',    
                width:240,    
                progress:true,    
                closable:false   
            });  

上面我们虽然已经得到了进度条，但是它的进度状态不会发生变化，我们需要调用Ext.MessageBox.updateProgree()函数让进度条状态发生变化，通常，我们会使用closable:false来隐藏对话框右上角的关闭按钮，从而禁止用户关掉进度条。

现在，我们为上面添加更新进度条的功能，我们使用timeout定时器对进度条进行修改，进度条的状态会随着时间而变化，10秒后整个进度条对话框将隐藏。关键代码如下：

 

上面我们虽然已经得到了进度条，但是它的进度状态不会发生变化，我们需要调用Ext.MessageBox.updateProgree()函数让进度条状态发生变化，通常，我们会使用closable:false来隐藏对话框右上角的关闭按钮，从而禁止用户关掉进度条。

现在，我们为上面添加更新进度条的功能，我们使用timeout定时器对进度条进行修改，进度条的状态会随着时间而变化，10秒后整个进度条对话框将隐藏。关键代码如下：

Ext.MessageBox.show({    
                title:'请等待',    
                msg:'读取数据中……',    
                width:240,    
                progress:true,    
                closable:false   
            });    
                
            var f=function(v){    
                return function(){    
                    if(v==11){    
                        Ext.MessageBox.hide();    
                    }else{    
                        Ext.MessageBox.updateProgress(v/10,'正在读取第 '+v+' 个，一共10个。');    
                    }    
                };    
            };    
            for(var i=1;i<12;i++)    
            {    
                setTimeout(f(i),i*1000);    
            }   

4、动画效果

我们可以为对话框设置弹出和关闭的动画效果，使用animEl参数指定一个HTML元素，对话框就会依据制定的HTML元素播放弹出和关闭的动画。我们修改前面的代码，加入animEl参数实现动画效果,如下面的代码所示：

Ext.MessageBox.show({  
               title:'自定义对话框的按钮',  
               msg:'从三个按钮中选择一个',  
               buttons:Ext.MessageBox.YESNOCANCEL,  
               fn:function(btn){  
                   alert('您刚刚点击了 '+btn);  
               },  
               animEl:'dialog' 
           }); 

animEl参数的值是一个字符串，它与HTML中的一个元素的id相对应，例如<div id="dialog"></div>。依据这个元素的id，我们创建的对话框才知道根据哪个元素播放弹出和关闭的动画

 

 Ext.Window的常用属性

 窗口的相关属性介绍：

el:对应HTML的一个元素。

layout:对应窗口的布局样式（layout:fit表示布局会充满整个窗口）

closeAction：‘hide’是个常数，它用来控制用户单击右上角的关闭图标执行的操作。参数值'hide'表示关闭窗口执行的隐藏操作指令，之后我们还可以使用show（）函数来显示刚刚关闭的窗口。如果使用默认值'close'，会在关闭窗口是把窗口对象销毁，这样就不能使用show()函数来显示窗口了。

closeable：用户不能使用右上角的关闭按钮

draggable:用户是否可以随意拖动窗口的位置

Buttons ：用于设置显示在窗口底部的按钮

items：包含的其他的组件

 

窗口最大化和最小化：设置参数maximizable:true

防止窗口超出浏览器：设置窗口的移动范围constrain和constrainHeader,他们分别用来限制窗口的整体和窗口顶部不能超过浏览器的边界。

设置窗口中的按钮：通过buttons参数指定窗口下部的按钮。通过buttonAlign参数设置按钮的对齐方式。defaultbutton按钮用来设置用户默认选择。

窗口的其他配置属性

resizable：可以用来控制窗口是否可以通过拖动改变大小。

resizeableHandle：用来控制拖动的方式。