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。

相关文章

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

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

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

Java消息队列：RabbitMQ与Kafka的集成与应用

Java消息队列：RabbitMQ与Kafka的集成与应用 大家好，我是微赚淘客返利系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！ 在现代的分布式系统中，消息队列是实现系统间通信、解耦和提高可扩展性的重要组件。RabbitMQ和Kafka是两个广泛使用的消息队列系统，它们各有特点和优势。本文将介绍如何在Java应用中集成RabbitMQ和Kafka，并展示它们的应用场景。 消息队
阅读更多...
Kafka 分布式消息系统详细介绍

Kafka 分布式消息系统详细介绍

Kafka 分布式消息系统 一、Kafka 概述1.1 Kafka 定义1.2 Kafka 设计目标1.3 Kafka 特点 二、Kafka 架构设计2.1 基本架构2.2 Topic 和 Partition2.3 消费者和消费者组2.4 Replica 副本 三、Kafka 分布式集群搭建3.1 下载解压3.1.1 上传解压 3.2 修改 Kafka 配置文件3.2.1 修改zookeep
阅读更多...
Android 友盟消息推送集成遇到的问题

Android 友盟消息推送集成遇到的问题

友盟消息推送遇到的问题 集成友盟消息推送，步骤根据提供的技术文档接入便可。可是当你集成到项目中去的时候，可能并不是一帆风顺就搞定，因为你项目里面是可能集成了其他的sdk（比如支付宝，微信，七鱼等等三方的sdk）。那么这个时候，再加上友盟的消息推送sdk集成可能就会出现问题。 问题清单 友盟消息推送sdk和支付宝sdk冲突问题 后台配置了消息推送，也显示发送成功，但是手机没有收到消息通知
阅读更多...
消息队列的理解和应用场景

消息队列的理解和应用场景

知乎上的一个通俗理解的优秀答案 by 祁达方 小红是小明的姐姐。 小红希望小明多读书，常寻找好书给小明看，之前的方式是这样：小红问小明什么时候有空，把书给小明送去，并亲眼监督小明读完书才走。久而久之，两人都觉得麻烦。 后来的方式改成了：小红对小明说「我放到书架上的书你都要看」，然后小红每次发现不错的书都放到书架上，小明则看到书架上有书就拿下来看。 书架就是一个消息队列，小红是生产者，小明是
阅读更多...
Ext重写手法

Ext重写手法

常用的几种方式：1、Ext.apply()和Ext.applyIf()2、Ext.override()3、想做某个类大的修改，可以把该类单独从源码中拿出来，直接修改，然后引用时先应用ext-all.js，再引用从源码中拿出修改的那个类4、obj.prototype.method=function(){}
阅读更多...
基于 RocketMQ 的云原生 MQTT 消息引擎设计

基于 RocketMQ 的云原生 MQTT 消息引擎设计

作者：沁君 概述 随着智能家居、工业互联网和车联网的迅猛发展，面向 IoT（物联网）设备类的消息通讯需求正在经历前所未有的增长。在这样的背景下，高效和可靠的消息传输标准成为了枢纽。MQTT 协议作为新一代物联网场景中得到广泛认可的协议，正逐渐成为行业标准。 本次我们将介绍搭建在 RocketMQ 基础上实现的 MQTT 核心设计，本文重点分析 RocketMQ 如何适应这些变化，通过优化存储
阅读更多...
消息队列创建以及使用示例

消息队列创建以及使用示例

消息队列是消息的链接表，存放在内核中并由消息队列标示符标识。 1. 创建或打开一个队列 int msgget(key_t key, int flag); key: 键 由ftok()生成 key_t ftok(const char* path, int id); flag: IPC_CREAT 或 IPC_EXCL  2. 发送消息 int msgsn
阅读更多...
WebSocket+Spring boot 构建一个完整消息服务

WebSocket+Spring boot 构建一个完整消息服务

1、添加依赖 compile project(":faas-spring-boot-starter-data-websocket") 2、定义WebSocketHandler Socket 服务入口（Header接收 jwt-token 同应用登录的Token（直接解决鉴权问题），然后定义请求的自定义参数，方便后续消息推送、支持群发、私发、模糊匹配） @Component@WebSock
阅读更多...
Kafka【十三】消费者消费消息的偏移量

Kafka【十三】消费者消费消息的偏移量

偏移量offset是消费者消费数据的一个非常重要的属性。默认情况下，消费者如果不指定消费主题数据的偏移量，那么消费者启动消费时，无论当前主题之前存储了多少历史数据，消费者只能从连接成功后当前主题最新的数据偏移位置读取，而无法读取之前的任何数据。如果想要获取之前的数据，就需要设定配置参数或指定数据偏移量。 【1】起始偏移量 在消费者的配置中，我们可以增加偏移量相关参数auto.offset.re
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2