ext消息框

2024-06-02 18:58
文章标签 消息 ext

本文主要是介绍ext消息框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！


Ext JS消息提示框主要包括：alert、confirm、prompt、show

　　1、Ext.MessageBox.alert()

　　调用格式：

　　alert( String title, String msg, [Function fn], [Object scope] )

　　参数说明：

　　title：提示框的标题。

　　msg：显示的消息内容。

　　[Function fn]：（可选）回调函数。

　　[Object scope]：（可选）回调函数的作用域。

　　返回值：

　　Ext.window.MessageBox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Hello World</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function () {Ext.MessageBox.alert("提示", "Hello World !");});
</script>
</head>
<body>
</body>
</html>
　效果图：

　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Ext.MessageBox.alert支持HTML格式文本</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function () {Ext.MessageBox.alert("提示", "<font color='red'>支持HTML格式文本</font>");});
</script>
</head>
<body>
</body>
</html>

　效果图：

　　回调函数：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Hello World</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">
//        Ext.onReady(function () {
//            Ext.MessageBox.alert("提示", "Hello World !", callBack);
//        });//        function callBack(id) {
//            alert("单击的按钮ID是：" + id);
//        }Ext.onReady(function () {Ext.MessageBox.alert("提示", "Hello World !", function (id) { alert("单击的按钮ID是：" + id); });});</script>
</head>
<body>
</body>
</html>
　2、Ext.MessageBox.confirm()

　　调用格式：

　　confirm( String title, String msg, [Function fn], [Object scope] )

　　参数说明及返回值与Ext.MessageBox.alert()相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Ext.MessageBox.confirm</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">
//        Ext.onReady(function () {
//            Ext.MessageBox.confirm("提示", "请单击我，做出选择！", callBack);
//        });//        function callBack(id) {
//            alert("单击的按钮ID是：" + id);
//        }Ext.onReady(function () {Ext.MessageBox.confirm("提示", "请单击我，做出选择！", function (id) { alert("单击的按钮ID是：" + id); });});</script>
</head>
<body>
</body>
</html>

　效果图：

　　3、Ext.MessageBox.prompt()

　　调用格式：

　　confirm( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] )
　　参数说明：

　　[Boolean/Number multiline]：设置为false将显示一个单行文本域，设置为true将以默认高度显示一个多行文本区。或者以像素为单位直接设置文本域的高度。默认为false。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Ext.MessageBox.prompt</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">
//        Ext.onReady(function () {
//            Ext.MessageBox.prompt("提示", "请输入内容：", callBack, this, true, "我是默认值");
//        });//        function callBack(id, msg) {
//            alert("单击的按钮ID是：" + id + "\n" +  "输入的内容是：" + msg);
//        }Ext.onReady(function () {Ext.MessageBox.prompt("提示", "请输入内容：", function (id, msg) { alert("单击的按钮ID是：" + id + "\n" +"输入的内容是：" + msg); }, this, true, "我是默认值");});
</script>
</head>
<body>
</body>
</html>

　效果图：

　　4、Ext.MessageBox.wait()
　　调用格式：

　　wait( String msg, [String title] , [Object config] )

　　参数说明：

　　msg：显示的消息内容。

　　[String title]：提示框标题，为可选参数。

　　[Object config]：用于配置进度条的配置对象，为可选参数。

　　返回值：

　　Ext.window.MessageBox

 

　　代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Ext.MessageBox.wait示例</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function () {Ext.MessageBox.wait("请等待，操作需要一定时间！", "提示", {text:"进度条上的文字"});});</script>
</head>
<body>
</body>
</html>

　效果图：

　　5、Ext.MessageBox.show()

　　Ext.MessageBox常用配置项：

配置项类型说明
titleString提示框标题
msgString显示的消息内容
widthNumber对话框的宽度，以px为单位
maxWidthNumber对话框的最大宽度，默认为600px
minWidthNumber对话框的最小宽度，默认为100px
closableBooleanfalse将隐藏右上角的关闭按钮，默认为true
modalBooleantrue为模态窗口，false为非模式窗口
fnFunction

回调函数

参数说明：

buttonId：按钮id

text：输入的文字

opt：传入show方法的配置对象

buttonsNumber/Boolean按钮组，默认为false，不显示任何按钮
progressBooleantrue则显示一个进度条，默认为false，该进度条需要由程序控制滚动
progressTextString进度条上显示的文字，默认为“”
proxyDragBooleantrue则显示一个highlight拖动代理，默认为false
waitBooleantrue则显示一个自动滚动的进度条，默认为false
waitConfigObject等待进度条的配置对象，在wait为true时有效
promptBooleantrue则显示一个单行文本域，默认为false
valueString如果prompt设置为true，则value值将显示在文本域中
multilineBoolean如果prompt设置为true，则multiline为true显示多行文本域，false显示单行文本域
defaultTextHeightNumber多行文本域的默认高度，默认值为75px
iconString一个样式文件，它为对话框提供一个背景图

　　Buttons配置项：

提示框按钮配置对象说明
Ext.Msg.CANCEL只显示一个“取消”按钮
Ext.Msg.NO只显示一个“否”按钮
Ext.Msg.OK只显示一个“确定”按钮
Ext.Msg.OKCANCEL显示两个按钮，“确定”和“取消”
Ext.Msg.YES只显示一个“是”按钮
Ext.Msg.YESNO显示两个按钮，“是”和“否”
Ext.Msg.YESNOCANCEL显示三个按钮，“是”、“否”和“取消”

　　图标样式说明：

样式表说明
Ext.Msg.ERROR错误图标
Ext.Msg.INFO信息图标
Ext.Msg.QUESTION问题图标
Ext.Msg.WARNING警告图标

　　调用格式：

　　show( Object config)

　　参数说明：

　　一个包含提示框配置信息的配置对象

　　返回值：

　　Ext.window.MessageBox

　　代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Ext.MessageBox.show</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">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});});</script>
</head>
<body>
</body>
</html>

　效果图：



这篇关于ext消息框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1024809。

相关文章

SpringKafka消息发布之KafkaTemplate与事务支持功能

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优
阅读更多...
SpringIntegration消息路由之Router的条件路由与过滤功能

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤
阅读更多...
Spring Boot整合消息队列RabbitMQ的实现示例

Spring Boot整合消息队列RabbitMQ的实现示例

《SpringBoot整合消息队列RabbitMQ的实现示例》本文主要介绍了SpringBoot整合消息队列RabbitMQ的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的... 目录RabbitMQ 简介与安装1. RabbitMQ 简介2. RabbitMQ 安装Spring
阅读更多...
springboot rocketmq配置生产者和消息者的步骤

springboot rocketmq配置生产者和消息者的步骤

《springbootrocketmq配置生产者和消息者的步骤》本文介绍了如何在SpringBoot中集成RocketMQ,包括添加依赖、配置application.yml、创建生产者和消费者,并展... 目录1. 添加依赖2. 配置application.yml3. 创建生产者4. 创建消费者5. 使用在
阅读更多...
如何通过Python实现一个消息队列

如何通过Python实现一个消息队列

《如何通过Python实现一个消息队列》这篇文章主要为大家详细介绍了如何通过Python实现一个简单的消息队列,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录如何通过 python 实现消息队列如何把 http 请求放在队列中执行1. 使用 queue.Queue 和 reque
阅读更多...
解读Redis秒杀优化方案(阻塞队列+基于Stream流的消息队列)

解读Redis秒杀优化方案(阻塞队列+基于Stream流的消息队列)

《解读Redis秒杀优化方案(阻塞队列+基于Stream流的消息队列)》该文章介绍了使用Redis的阻塞队列和Stream流的消息队列来优化秒杀系统的方案,通过将秒杀流程拆分为两条流水线,使用Redi... 目录Redis秒杀优化方案(阻塞队列+Stream流的消息队列)什么是消息队列？消费者组的工作方式每
阅读更多...
使用C/C++调用libcurl调试消息的方式

使用C/C++调用libcurl调试消息的方式

《使用C/C++调用libcurl调试消息的方式》在使用C/C++调用libcurl进行HTTP请求时,有时我们需要查看请求的/应答消息的内容（包括请求头和请求体）以方便调试,libcurl提供了多种... 目录1. libcurl 调试工具简介2. 输出请求消息使用 CURLOPT_VERBOSE使用 C
阅读更多...
Java中Springboot集成Kafka实现消息发送和接收功能

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf
阅读更多...
SpringBoot 自定义消息转换器使用详解

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容
阅读更多...
ActiveMQ—消息特性（延迟和定时消息投递）

ActiveMQ—消息特性（延迟和定时消息投递）

ActiveMQ消息特性：延迟和定时消息投递（Delay and Schedule Message Delivery） 转自：http://blog.csdn.net/kimmking/article/details/8443872 有时候我们不希望消息马上被broker投递出去，而是想要消息60秒以后发给消费者，或者我们想让消息没隔一定时间投递一次，一共投递指定的次数。。。 类似
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2