(Ext基础篇) 弹出窗口
来源:互联网 发布:零售门店经营数据分析 编辑:程序博客网 时间:2024/04/30 08:06
从外观上来讲,浏览器自带的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:用来控制拖动的方式。
- (Ext基础篇) 弹出窗口
- Ext的弹出窗口
- ext弹出窗口
- Ext弹出窗口
- EXT弹出窗口
- Extjs-弹出窗口 Ext.MessageBox
- Extjs-弹出窗口 Ext.Window
- EXT弹出Window窗口被flash遮盖
- Ext Js弹出窗口(七)
- ext datefield弹出窗口不够宽
- ExtJS前端框架EXT弹出窗口事件
- Ext 弹出窗口(Ext.MessageBox) 中文问题
- Jquery移除Ext弹出的Div窗口
- EXT怎么在弹出窗口显示一个下拉框?
- Ext下解决无弹出窗口的设计解决办法
- EXTJS6.2 使用弹出确认框窗口Ext.Msg.show
- 在ext开发中遇到ext弹出窗口被FlexPaper遮住问题及解决
- 弹出窗口组件基础示例(实例代码)
- Java中Runnable和Thread的区别
- Cocos2d-x CCScrollView demo
- 用shell脚本写的可以计算出自己来到这个世界的天数
- c++特性:指向类成员的指针和非类型类模板参数
- 利用矩阵快速幂求斐波那契数列
- (Ext基础篇) 弹出窗口
- Java多线程实例
- 大二的一年计划
- 利用dblink实现oracle对oracle数据库的同步
- eclipse的Android sdk manager刷不出API列表 解决办法
- JAVA中使用JSON进行数据传递
- 64位win7下PL/SQL Developer连接oracle 出错ORA-12154: TNS:无法解析指定的连接标识符
- 利用jQuery对无序列表排序
- HDU 3460 Ancient Printer