ExtJs---MessAgeBox总结
2015-05-21 10:36
183 查看
总结了两个人的博客:
http://www.jb51.net/article/22860.htm http://blog.csdn.net/gongth_12/article/details/20446591
Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种风格的信息提示对话框,Ext.Msg是该类的别名,使用Ext.MessageBox和用Ext.Msg效果是一样的,而后者提供了更简单的方式。
复制代码 代码如下:
Ext.onReady(function() {
Ext.Msg.alert('提示', '逗号分隔参数列表'); //这种方式非常常见的
});
效果图:
复制代码 代码如下:
Ext.onReady(function() {
//定义 JSON(配置对象)
var config = {
title:'提示',
msg: 'JSON配置方式,简单吧'
}
Ext.Msg.show(config);
});
效果图:
上边我只是简单举例,好了看到了漂亮的界面了吧!接下来认识一下Ext.MessageBox
Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种风格的信息提示对话框,Ext.Msg是该类的别名,使用Ext.MessageBox和用Ext.Msg效果是一样的,而后者提供了更简单的方式。在介绍前,下来了解Ext.MessageBox提供的信息提示框与JavaScript提供的原始信息提示框的差别,主要表现在3个方面,他们分别是“实现方式”、“显示信息的格式”、和“对程序运行的影响”,下面对着3方面分别进行详细说明。
1、 实现方式:
标准JavaScript提供的信息提示对话框是一个真正的弹出窗口。Ext.MessageBox提供的信息提示对话框并不是真正的弹出窗口,他只是在当前页面显示的一个层(div),所以无法用窗口扑捉到软件来的到他
2、 显示信息的格式:
标准JavaScript提供的信息提示对话框中显示的内容不是HTML格式文本,而是纯文本。
不能使用HEML中的格式化方法进行排版,只能以空格、回车以及各种标点符来构建显示格式。
Ext.MessageBox提供的信息提示对话框显示的文本不仅支持纯文本显示还支持用HTML格式文本,采用HTML中的格式化方法进行排版,效果更加丰富多彩。下面是一个简单的示例。
复制代码 代码如下:
<script type="text/javascript">
alert('只能用纯文本');//这里不支持HTML格式的字符串
</script>
效果图:
复制代码 代码如下:
//支持html格式文本
Ext.onReady(function() {
Ext.Msg.alert('<font size=4>提示</font>','<font color=red> 支持html格式文本 </font>');
});
效果图:
复制代码 代码如下:
<script type="text/javascript">
Ext.onReady(function() {
alert('我会停止程序的执行');
Ext.Msg.alert('提示','我不会停止程序的执行');
});
</script>
效果图:
复制代码 代码如下:
<script type="text/javascript">
Ext.onReady(function() {
Ext.Msg.alert('提示','我不会停止程序的执行');
alert('我会停止程序的执行');
});
</script>
效果图:
看到效果了很简单很简单吧!下面我们了解一下怎么回调函数,一个只读信息提示框,用来代替JavaScript标准的alert()方法有一个确定按钮,如果其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的推出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中。
调用格式:
alert( String title,String msg,[function fn],[Object scope]);
//参数说明
title: 提示框的标题
msg: 显示的信息内容
[function fn]: (可选) 回调函数
[Object scopt]: (可选) 回调函数的作用域
返回值:
Ext.MessageBox
示例:
复制代码 代码如下:
<script type="text/javascript">
Ext.onReady(function() {
Ext.MessageBox.alert('提示', '请单击我 确定', callBack);
function callBack(id) {
alert('单击的按钮id是:'+id);
}
});
</script>
效果图:
点击OK的效果
点击x的效果
提示:由于ExtJS的alert是异步执行的不会产生阻塞,因此要将用户确认后才执行的代码放在回调函数中,否则在用户确认后续代码就会执行造成不必要的错误,这一点需要我们注意的。
//-----------------------------------------------------------------------------------------------
1、Ext.MessageBox.alert()
调用格式:
alert( String title, String msg, [Function fn], [Object scope] )
参数说明:
title:提示框的标题。
msg:显示的消息内容。
[Function fn]:(可选)回调函数。
[Object scope]:(可选)回调函数的作用域。
ExtJS MessageBox alert支持HTML格式文本。
[html]
view plaincopy
Ext.onReady(function () {
Ext.MessageBox.alert("提示", "Hello World !", function (id) { alert("单击的按钮是:" + id); });
});
2、Ext.MessageBox.confirm()
调用格式:
confirm( String title, String msg, [Function fn], [Object scope] )
[html]
view plaincopy
Ext.onReady(function () {
Ext.MessageBox.confirm("提示", "请单击我,做出选择!", function (id) { alert("单击的按钮是:" + id); });
});
3、Ext.MessageBox.prompt()
调用格式:
confirm( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] )
参数说明:
[Boolean/Number multiline]:设置为false将显示一个单行文本域,设置为true将以默认高度显示一个多行文本区。或者以像素为单位直接设置文本域的高度。默认为false。
[html]
view plaincopy
Ext.onReady(function () {
Ext.MessageBox.prompt("提示", "请输入内容:", function (id, msg) { alert("单击的按钮ID是:" + id + "\n" +"输入的内容是:" + msg); }, this, true, "我是默认值");
});
4、Ext.MessageBox.show()
[html]
view plaincopy
Ext.onReady(function () {
Ext.MessageBox.show({
title: "提示",
msg: "三个按钮、一个多行文本域",
modal: true,
prompt: true,
value: "请输入",
fn: function (id, msg) {
Ext.MessageBox.alert("单击的按钮id是:" + id + "\n" + "输入的内容是:" + msg);
},
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUEATION
});
});
http://www.jb51.net/article/22860.htm http://blog.csdn.net/gongth_12/article/details/20446591
Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种风格的信息提示对话框,Ext.Msg是该类的别名,使用Ext.MessageBox和用Ext.Msg效果是一样的,而后者提供了更简单的方式。
复制代码 代码如下:
Ext.onReady(function() {
Ext.Msg.alert('提示', '逗号分隔参数列表'); //这种方式非常常见的
});
效果图:
复制代码 代码如下:
Ext.onReady(function() {
//定义 JSON(配置对象)
var config = {
title:'提示',
msg: 'JSON配置方式,简单吧'
}
Ext.Msg.show(config);
});
效果图:
上边我只是简单举例,好了看到了漂亮的界面了吧!接下来认识一下Ext.MessageBox
Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种风格的信息提示对话框,Ext.Msg是该类的别名,使用Ext.MessageBox和用Ext.Msg效果是一样的,而后者提供了更简单的方式。在介绍前,下来了解Ext.MessageBox提供的信息提示框与JavaScript提供的原始信息提示框的差别,主要表现在3个方面,他们分别是“实现方式”、“显示信息的格式”、和“对程序运行的影响”,下面对着3方面分别进行详细说明。
1、 实现方式:
标准JavaScript提供的信息提示对话框是一个真正的弹出窗口。Ext.MessageBox提供的信息提示对话框并不是真正的弹出窗口,他只是在当前页面显示的一个层(div),所以无法用窗口扑捉到软件来的到他
2、 显示信息的格式:
标准JavaScript提供的信息提示对话框中显示的内容不是HTML格式文本,而是纯文本。
不能使用HEML中的格式化方法进行排版,只能以空格、回车以及各种标点符来构建显示格式。
Ext.MessageBox提供的信息提示对话框显示的文本不仅支持纯文本显示还支持用HTML格式文本,采用HTML中的格式化方法进行排版,效果更加丰富多彩。下面是一个简单的示例。
复制代码 代码如下:
<script type="text/javascript">
alert('只能用纯文本');//这里不支持HTML格式的字符串
</script>
效果图:
复制代码 代码如下:
//支持html格式文本
Ext.onReady(function() {
Ext.Msg.alert('<font size=4>提示</font>','<font color=red> 支持html格式文本 </font>');
});
效果图:
复制代码 代码如下:
<script type="text/javascript">
Ext.onReady(function() {
alert('我会停止程序的执行');
Ext.Msg.alert('提示','我不会停止程序的执行');
});
</script>
效果图:
复制代码 代码如下:
<script type="text/javascript">
Ext.onReady(function() {
Ext.Msg.alert('提示','我不会停止程序的执行');
alert('我会停止程序的执行');
});
</script>
效果图:
看到效果了很简单很简单吧!下面我们了解一下怎么回调函数,一个只读信息提示框,用来代替JavaScript标准的alert()方法有一个确定按钮,如果其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的推出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中。
调用格式:
alert( String title,String msg,[function fn],[Object scope]);
//参数说明
title: 提示框的标题
msg: 显示的信息内容
[function fn]: (可选) 回调函数
[Object scopt]: (可选) 回调函数的作用域
返回值:
Ext.MessageBox
示例:
复制代码 代码如下:
<script type="text/javascript">
Ext.onReady(function() {
Ext.MessageBox.alert('提示', '请单击我 确定', callBack);
function callBack(id) {
alert('单击的按钮id是:'+id);
}
});
</script>
效果图:
点击OK的效果
点击x的效果
提示:由于ExtJS的alert是异步执行的不会产生阻塞,因此要将用户确认后才执行的代码放在回调函数中,否则在用户确认后续代码就会执行造成不必要的错误,这一点需要我们注意的。
//-----------------------------------------------------------------------------------------------
1、Ext.MessageBox.alert()
调用格式:
alert( String title, String msg, [Function fn], [Object scope] )
参数说明:
title:提示框的标题。
msg:显示的消息内容。
[Function fn]:(可选)回调函数。
[Object scope]:(可选)回调函数的作用域。
ExtJS MessageBox alert支持HTML格式文本。
[html]
view plaincopy
Ext.onReady(function () {
Ext.MessageBox.alert("提示", "Hello World !", function (id) { alert("单击的按钮是:" + id); });
});
2、Ext.MessageBox.confirm()
调用格式:
confirm( String title, String msg, [Function fn], [Object scope] )
[html]
view plaincopy
Ext.onReady(function () {
Ext.MessageBox.confirm("提示", "请单击我,做出选择!", function (id) { alert("单击的按钮是:" + id); });
});
3、Ext.MessageBox.prompt()
调用格式:
confirm( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] )
参数说明:
[Boolean/Number multiline]:设置为false将显示一个单行文本域,设置为true将以默认高度显示一个多行文本区。或者以像素为单位直接设置文本域的高度。默认为false。
[html]
view plaincopy
Ext.onReady(function () {
Ext.MessageBox.prompt("提示", "请输入内容:", function (id, msg) { alert("单击的按钮ID是:" + id + "\n" +"输入的内容是:" + msg); }, this, true, "我是默认值");
});
4、Ext.MessageBox.show()
[html]
view plaincopy
Ext.onReady(function () {
Ext.MessageBox.show({
title: "提示",
msg: "三个按钮、一个多行文本域",
modal: true,
prompt: true,
value: "请输入",
fn: function (id, msg) {
Ext.MessageBox.alert("单击的按钮id是:" + id + "\n" + "输入的内容是:" + msg);
},
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUEATION
});
});
相关文章推荐
- ExtJS的MessageBox总结
- EXTJS 学习总结(1) Ext.MessageBox
- (7)Extjs4.2 MessageBox的三种用法和 进度条
- Extjs常用总结
- EXTJS学习总结(A)
- ExtJS 开发总结
- Extjs学习一 --Ext.MessageBox
- Extjs实用简单小功能总结
- Extjs 学习总结-代理
- Extjs form validate 表单验证总结
- ExtJS 给textfield赋值的方法总结
- ExtJS 开发总结
- Extjs学习总结之12使用ComboBox实现分页
- Extjs下拉树代码测试总结
- 解决方案ExtJS错误方法总结
- ExtJs使用总结(非常详细)
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- ExtJs表单验证的方法总结
- extjs 树总结(数据库层)
- ExtJS 开发总结