(Ext基础篇) 弹出窗口

朱雀 2023-10-10 10:34 76阅读 0赞

从外观上来讲，浏览器自带的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.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：用来控制拖动的方式。