当前位置: 代码迷 >> Web前端 >> Ext.MessageBox的施用
  详细解决方案

Ext.MessageBox的施用

热度:231   发布时间:2012-11-18 10:51:22.0
Ext.MessageBox的使用

Ext.MessageBox是一个工具类,它继承自Object对象,用来生成各种风格的信息提示对话框,Ext.Msg是该类的别名,使用Ext.MessageBox和使用Ext.Msg有相同的效果,而后者提供了更简短的调用方式。

?

1、Ext.MessageBox.alert()
????? 调用格式:Ext.MessageBox.alert(String title, String msg, [Function fn], [Object scope])
????? 参数说明:
??????????? title:提示框的标题。
??????????? msg:显示的提示信息。
??????????? fn:回调函数。可选
??????????? scope:回调函数的作用域。可选
????? 范例:

Ext.MessageBox.alert("提示", "信息提示对话框!", function(id){
	alert(id); //按钮ID传递到回调函数中,值为ok、cancel
});

?

2、Ext.MessageBox.confirm()

??????????? 调用格式:Ext.MessageBox.confirm(String title, String msg, [Function fn], [Object scope])
??????????? 参数说明:同Ext.MessageBox.alert()

??????????? 范例:

Ext.Msg.confirm("提示", "是否要删除?", function(id){
	alert(id); //按钮ID传递到回调函数中,值为yes、no
});

?

3、Ext.MessageBox.prompt()

??????????? 调用格式:Ext.MessageBox.prompt(String title, String msg, [Function fn], [Object scope],???????????? [Boolean/Number multiline])
?????????????参数说明:
??????????????????????? 前4项参数同Ext.MessageBox.alert()
??????????????????????? [Boolean/Number multiline]:是否显示为多行文本框。或者以像素为单位直接设置文本域的高度。默认为false。
??????????? 范例:

Ext.Msg.prompt("提示", "请输入密码:", function(id, msg){
	alert(id + "_" + msg); //按钮ID传递到回调函数中,值为ok、cancel
}, this, true);

?

4、Ext.MessageBox.wait()
??????????? 调用格式:Ext.MessageBox.wait(String msg, [String title], [Object config])
??????????? 参数说明:
??????????????????????? msg:显示的提示信息。
??????????????????????? [String title]:提示框的标题。可选
??????????????????????? [Object config]:用于配置进度条的配置对象。可选??
??????????? 范例:

Ext.Msg.wait("请耐心等待...", "提示", {
	text: "进度条上的文字"
});

?

5、Ext.MessageBox.show()
??????????? 调用格式:Ext.MessageBox.show(Object config)
??????????? 参数说明:一个包含提示框配置信息的配置对象。
??????????? 常用配置项:
??????????????????????? title:提示框的标题
??????????????????????? msg:显示的信息内容
??????????????????????? buttons:一个包含配置信息的json对象或false不显示任何按钮,默认为false
????????????????????????????? 可选值:
??????????????????????????????????? Ext.Msg.CANCEL
??????????????????????????????????? Ext.Msg.OK
??????????????????????????????????? Ext.Msg.OKCANCEL
??????????????????????????????????? Ext.Msg.YESNO
??????????????????????????????????? Ext.Msg.YESNOCANCEL
??????????????????????? icon:样式文件
????????????????????????????? 可选值:
??????????????????????????????????? Ext.Msg.ERROR
??????????????????????????????????? Ext.Msg.INFO
??????????????????????????????????? Ext.Msg.QUESTION
??????????????????????????????????? Ext.Msg.WARNING
??????????????????????? fn:回调函数
??????????????????????? width:对话框宽度,以像素为单位
??????????????????????? minWidth:最小宽度
??????????????????????? maxWidth:最大宽度
??????????????????????? closable:是否显示右上角的关闭按钮,默认为true
??????????????????????? modal:是否为模式窗口,默认为true
??????????????????????? progress:是否显示一个进度条,默认为false,该进度条需要由程序控制滚动
??????????????????????? progressText:进度条上显示的文字
??????????????????????? wait:是否显示一个自动滚动的进度条,默认为false
??????????????????????? prompt:是否显示一个单行文本域,默认为false
??????????????????????? value:如果prompt为true,则value值将显示在文本域中
??????????????????????? multiline:如果prompt为true,则是否显示多行文本域
??????????? 范例:

//改变默认的按钮文字
//必须放在创建提示框之前
/*
Ext.Msg.buttonText={
	yes: "是",
	no: "否",
	ok: "确定",
	cancel: "取消"
};
*/

Ext.Msg.buttonText.yes = "是";
Ext.Msg.buttonText.no = "否";

var obj = Ext.Msg.show({
	title: "提示",
	msg: "确定要删除吗?",
	buttons: Ext.Msg.YESNO,
	icon: Ext.Msg.QUESTION,
	fn: function(id, msg){
		alert(id + "_" + msg);
	}
});

?

6、动态更新提示框

??????????? 1)更新提示文字:

??????????????????????? 调用格式:updateText([String text])
??????????????????????? 范例:

var obj = Ext.Msg.show({
	title: "提示",
	msg: "当前时间:",
	icon: Ext.Msg.INFO,
	width: 200
});

//任务管理器
Ext.TaskMgr.start({
	run: function(){
		//alert(arguments[0]); //获取参数值
		obj.updateText(new Date().format("Y-m-d G:i:s"));
	},
	interval: 1000,
	args: ["111", "222"]
});

?

2)更新进度条及提示信息:

??????????? 调用格式:updateProgress(Number value, String progressText, String msg)
??????????? 参数说明:
??????????????????value:0~1之间的数字,默认为0。
??????????????????progressText:进度条上显示的文字。
??????????????????msg:显示的信息内容。
??????????? 范例:

var obj = Ext.Msg.show({
	title: "提示",
	msg: "当前时间:",
	width: 200,
	progress: true
});

var count = 0; //刷新次数
var per = 0; //进度百分比
var progressText = ""; //进度条信息
var msg = ""; //显示的信息内容

//任务管理器
Ext.TaskMgr.start({
	run: function(){
		count++;
		if(count>10){
			obj.hide(); //隐藏对话框
			Ext.TaskMgr.stop(this); //停止任务
			count = 0;
		}
		per = count/10;
		progressText = "当前完成了" + per*100 + "%";
		msg = "当前时间:" + new Date().format("Y-m-d G:i:s");
		obj.updateProgress(per, progressText, msg);
	},
	interval: 1000
});

?

  相关解决方案