1 Ext.onReady(function () { 2 Ext.MessageBox.alert("提示信息!","Hello World!"); 3 });
Ext,是一个对象,onReady是Ext的准备函数。
Ext相关的代码都会在onReady函数中编写,类似于window的onload方法,以及jQuery中的onReady方法。
其执行时机是在页面DOM对象加载完毕后立即执行(这点和jQuery是一样的,window的onload方法,是在整个页面元素都加载完后才执行)。
MessageBox:这是ExtJs提供的弹出提示框组件
Ext.MessageBox,可以简写成Ext.Msg,Msg对象有一个alert方法,其方法声明为:
alert( String title, String msg, [Function fn], [Object scope] ) : Ext.window.MessageBox
Parameters
- title : String
标题条文本
- msg : String
消息盒本体文本
- fn : Function (optional)
消息盒子关闭(点击关闭或者确认按钮)后调用的回调函数
- scope : Object (optional)
回调函数被执行的范围(
this
reference)。Defaults to:
window
Returns
- Ext.window.MessageBox
this
Ext.MessageBox对象,是Ext.Window.MessageBox接口的单例实现
1 Ext.onReady(function () { 2 Ext.Msg.alert("提示信息!","Hello World!",function () { 3 console.info("我是回调函数") 4 },this); 5 });
MessageBox对象的alert方法,不同于JavaScript中的alert,MessageBox的alert,其实只是一个div,只不过加了一些样式,使其看起来像个弹窗。
怎么验证呢?
只要前后分别调用alert和MessageBox.alert,真正的弹窗,是会发生堵塞的。
其他Ext.Msg对象的常用方法
confirm方法:确认/取消 弹出框
1 Ext.onReady(function () { 2 Ext.Msg.confirm("标题","Yes Or No",function (op) { 3 if (op == "yes"){ 4 alert("确认了"); 5 //点击确认后要执行的操作 6 }else{ 7 alert("取消了"); 8 //点击取消后要执行的操作 9 } 10 },this); 11 })
回调函数有一个参数,传递的是用户点击的按钮,如果点击了确认,就传递yes,如果点击了取消,就传递no
prompt方法:有输入框的确认/取消 弹出框
1 Ext.onReady(function () { 2 Ext.Msg.prompt("标题","请输入姓名:",function (id,val) { 3 //id=ok id=cancel 4 if ("ok" == id){ 5 //点击了确认要做的事情 6 alert("1:"+val); 7 }else{ 8 //点击了取消要做的事情 9 alert("2:"+val); 10 } 11 },this,true,"张三"); 12 })
回调函数有两个参数,第一个表示用户点击的按钮(ok或cancel),第二个参数表示文本框中的输入值
prompt参数说明:标题,提示信息,回调函数,作用域,是否多行文本框,文本框默认值
wait方法:进度条
1 Ext.onReady(function () { 2 Ext.Msg.wait("提示信息","内容",{ 3 interval: 500, //循环定时间隔,毫秒 4 duration: 5000,//总时长,毫秒 5 increment: 3,//执行进度条的次数 6 text: ‘Updating...‘,//进度条上的提示文字 7 scope: this, 8 fn: function(){ 9 alert("执行完毕"); 10 } 11 }) 12 })
show方法:自定义弹出框
1 Ext.onReady(function () { 2 Ext.Msg.show({ 3 title: ‘Address‘, 4 msg: ‘Please enter your address:‘, 5 width: 300, 6 height:300, 7 buttons: Ext.Msg.OKCANCEL, 8 icon: Ext.window.MessageBox.INFO 9 }); 10 })
主要还是看文档