(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：用来控制拖动的方式。