三、ExtJS之对话框控件
来源:互联网 发布:淘宝店铺的起名大全 编辑:程序博客网 时间:2024/05/16 19:53
Extjs 在实现消息框的时候,完全摈弃了传统的风格,不再弹出新的对话框,而是在当前页面跳出一个层,并将原页面完整覆盖。原来,只是一种模拟。在 Ext 中,定义了一个类MessageBox,该类还有一个更精简的名字Msg,所有消息框都定义在该类中。
建立dialogs.js文件。
提示框(Alert)
提示框的语法:Ext.MessageBox. alert ( String title, String msg, Function fn, Object scope );
参数定义如下:
- title:标题
- msg:提示内容
- fn:提示框关闭后自动调用的回调函数
- scope:作用域,用于指定this指向哪里,一般不用管他,特殊情况下有用
其实,通常情况下,我们用得更多的是title和msg两个参数
extjsAlert1=function(){Ext.MessageBox.alert("提示框","这是一个提示框");}extjsAlert2=function(){Ext.MessageBox.alert("提示框","这是一个提示框",function(){alert("提示框关闭了");});}
记住函数名不要使用和DOM模型相同的名字,他们犯冲。
输入框(promt)
输入框用来提示输入字符串,相当于window.prompt()方法。
语法:Ext.MessageBox.prompt(String title,String msg, Function fn, Object scope, Boolean/Numbermultiline )
从定义中可以看到,前四个参数和提示框一样,最后多了一个参数,如果为true 或为数字,将允许输入多行或者指定默认高度(像素)。
extjsPromt1=function(){Ext.MessageBox.prompt("输入框","请输入您的姓名:",function(btn,txt){Ext.MessageBox.alert("结果","您点击了" + btn + "按钮,<br>输入内容为:" + txt);});}extjsPromt2=function(){Ext.MessageBox.prompt("输入框","请输入您的姓名:",function(btn,txt){Ext.MessageBox.alert("结果","您点击了" + btn + "按钮,<br>输入内容为:" + txt);},this,100);}
单行输入
多行输入
注意回调函数的参数,第一个为点击的按钮的名字,如果点击确定,为“ok”,如果点击取消,为“cancel”,第二个参数就是用户输入的文本。
确认框(confirm)
确认框提示用户作出选择,语法如下:Ext.MessageBox.confirm ( String title, String msg, Function fn, Object scope )参数同上
extjsConfirm=function(){Ext.MessageBox.confirm("确认","请点击下面的按钮做出选择",function(btn){Ext.MessageBox.alert("您的选择是:" + btn);});}
可以通过回调函数的参数btn采取相应的行动。
自定义消息框(show)
show()方法的语法如下:Ext.MessageBox.show ( Object config )语法是不是显得更简单?不要小瞧了他,config这个参数可谓包罗万象,使用json格式可以传输很多信息到方法中去。
config中常见属性如下:
- title:消息框标题栏
- msg:消息内容
- width:消息框的宽度
- multiline:是否显示多行文本
- closable:是否显示关闭按钮
- buttons:按钮
- icon:图标
- fn:回调函数
在上面的例子中,不熟悉的有buttons 和icon,这些选项在Ext.MessageBox 中已有定义。
buttons(按钮)的取值如下:
- OK:只有“确定”按钮
- CANCEL:只有“取消”按钮
- OKCANCEL:有“确定”和“取消”按钮
- YESNO:有“是”和“否”按钮
- YESNOCANCEL:有“是”、“否”和“取消”按钮
icons(图标)取值如下:
- INFO:信息图标
- WARNING:警告图标
- QUESTION:询问图标
- ERROR:错误图标
extjsShow=function(){var config={title: "自定义对话框",msg: "这是一个自定义对话框,想怎么搞就怎么搞",width: 400,multiline: true,closable: false,buttons: Ext.MessageBox.YESNOCANCEL,icon: Ext.MessageBox.QUESTION,fn: function(btn, txt){Ext.MessageBox.alert("结果", "您点击了‘yes’按钮<br>输入的值是:"+ txt);}};Ext.MessageBox.show(config);}
等待对话框(wait)
wait( String msg,
String title,
Object config
)
显示一个带有不断自动更新的进度条的消息框。这个可以被用在一个长时间运行的进程中防止用户交互。需要在进程完成的时候关闭消息框。
第三个参数表示配置选项,在本例中设置了internal选项为100,表示每100ms进度条前进一次。
extjsWait1=function(){Ext.MessageBox.wait('任务正在进行中,请稍候。。。','等待',{internal:100});setTimeout(function(){Ext.MessageBox.hide();Ext.MessageBox.alert('结束','任务已完成');},6000);}
进度条对话框(progress)
进度条对话框也是一个自定义消息框,配置config 时添时progress=true 即可,同时还可以设置其他相关信息,如进度提示等。Extjs 为我们提供的只是一个对话框而已,进度条的滚动还得通过代码实现。下面是进度条的代码示范:
extjsProgress=function(){Ext.MessageBox.show({title:'请等待',msg:'正在加载...',progressText:'正在初始化...',width:300,progress:true,//此属性证明这是一个进度条closable:false});var f=function(v){return function(){if(v==12){Ext.MessageBox.hide();Ext.MessageBox.alert('完成','所有项目加载完毕!');}else{var i = v/11;Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%已完成');}};}for(var i=1;i<13;i++){setTimeout(f(i),i*500);}}
在上面的代码中,progressText 属性是进度条滚动之前最初的文本,滚动进程由updateProgress(Number value, String progressText)方法来定义,参数value是从0~1之间的小数,表示进度百分比;progressText 则表示进度条滚动过程中的文本提示信息,如Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% 已完成');。
页面html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>对话框</title><link rel="stylesheet" type="text/css" href="script/resources/css/ext-all.css" /><script type="text/javaScript" src="script/adapter/ext/ext-base.js"></script><script type="text/javaScript" src="script/ext-all.js"></script><script type="text/javascript" src="script/locale/ext-lang-zh_CN.js"></script><script type="text/javascript" src="js/dialogs.js"></script></head><body><center><br><hr><input type="button" value="简单提示框" onclick="extjsAlert1()"><hr><input type="button" value="带有回调函数的提示框" onclick="extjsAlert2()"><hr><input type="button" value="单行输入框" onclick="extjsPromt1()"><hr><input type="button" value="多行输入框" onclick="extjsPromt2()"><hr><input type="button" value="确认框" onclick="extjsConfirm()"><hr><input type="button" value="自定义对话框" onclick="extjsShow()"><hr><input type="button" value="等待对话框" onclick="extjsWait1()"><hr><input type="button" value="进度对话框" onclick="extjsProgress()"><hr></center></body></html>
- 三、ExtJS之对话框控件
- ExtJS 对话框<三>
- 〖ExtJS〗之对话框
- ExtJs之窗口及对话框
- 动手学MFC之三——对话框控件
- Android 控件之对话框
- QT控件之对话框
- QT控件之对话框
- ExtJS初级教程之ExtJS Tree(三)
- ExtJS初级教程之ExtJS Grid(三)
- extJs控件之客户端查询
- extJs之简易上传控件
- ExtJs之表格控件入门
- ExtJs基本控件之表格
- ExtJS之对话框及窗口篇
- 【Android 开发】:UI控件之 Dialogs 对话框控件的的使用(三)
- ExtJS 对话框
- Extjs 继承控件的三种写法
- 什么是产品经理?产品经理存在的价值是什么?
- JFram 添加背景图片
- SSH免密码登录
- tar归档打包命令详解
- 有用的多元正态分布
- 三、ExtJS之对话框控件
- Android Tween动画
- JavaBean
- 亿邦动力网——电子商务新闻门户
- oracle数据库写Java 代码
- C宏定义解析
- 手把手教你_android自动化实践方案选型
- POJ 3104 Drying 二分
- matlab BP神经网络介绍