Ext.js 组件:Message Box消息框

最新推荐文章于 2024-07-29 17:49:33 发布
转载 最新推荐文章于 2024-07-29 17:49:33 发布 · 354 阅读 · 1
文章标签：

#前端框架 #extjs #Message box

本文详细介绍了Ext.js中五种不同类型的消息框：基本警报框、确认框、提示框、多行用户输入框及是否取消框。每种消息框都有其特定用途，如收集用户输入、请求确认或仅提供信息。文章提供了每种消息框的语法和示例代码。

Ext.js 消息框

消息框是显示某些事件发生时的一些警报信息。 Ext JS有不同的消息框：

编号消息框
1Basic alert box

这是最简单的警报框只是为了显示一些事件的一些信息。

2Confirm box

此消息框要求用户确认以及对不同选项用户选择调用的不同方法为yes或no。

3Prompt box

此消息框提示用户输入。

4multiline User input box

这也像提示框，但它允许用户输入多线信息，而不只是一行。

5Yes No Cancle alert box

这就像确认框，它询问用户一些确认是否用户想做任务或拒绝或基于用户选择取消任务不同的方法被调用。

1. Ext.js 基本警报框

描述

这是最简单的警报框只是为了显示一些事件的一些信息。

语法

这里是基本警报框的简单语法。

 Ext.Msg.alert('Title', 'Basic message box in ExtJS');

 

例

下面是一个简单的例子显示用法。

 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.Button', {
            renderTo: Ext.getElementById('msgBox'),
            text: 'Click Me',
            listeners: {
               click: function() {
                  Ext.Msg.alert('Title', 'Basic message box in ExtJS');
               }
            }
         });
      });
   </script>
</head>
<body>
   <p> Click the button for alert box </p>
   <div id = "msgBox" ></div>
</body>
</html>

这将产生以下结果

Ext.js 基本警报框

2. Ext.js 确认框

描述

此消息框要求用户确认以及对不同选项用户选择调用的不同方法为yes或no。

语法

下面是确认框的简单语法。

 

 Ext.MessageBox.confirm('Confirm', Msg, optional callbackFunction());

 

例
下面是一个简单的例子显示用法。

 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.Button', {
            renderTo: Ext.getElementById('msgBox'),
            text: 'Click Me',
            listeners: {
               click: function() {
                  Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do this ?', callbackFunction);
                  function callbackFunction(btn){
                  if(btn == 'yes') {
                     Ext.Msg.alert ('Button Click', 'You clicked the Yes button');
                  } else {
                     Ext.Msg.alert ('Button Click', 'You clicked the No button');
                  }
                     
                  };
               }
               
            }
         });
      });
   </script>
</head>
<body>
   <p> Click the button for alert box </p>
   <div id = "msgBox" ></div>
</body>
</html>

Ext.js 确认框

 

3. Ext.js 提示框

描述

此消息框提示用户输入。 它是一个单行用户输入。

语法

这里是简单的语法。

 

 Ext.Msg.prompt('Name', 'Please enter your name:', function(){});

 

例

下面是一个简单的例子显示用法。

 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.Button', {
            renderTo: Ext.getElementById('msgBox'),
            text: 'Click Me',
            listeners: {
               click: function() {
                  Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
                     if (btn == 'ok'){
                        Ext.Msg.alert('Hello', 'Hello '+text);
                     }
                  });
               }
            }
         });
      });
   </script>
</head>
<body>
   <p> Click the button for alert box </p>
   <div id = "msgBox" ></div>
</body>
</html>

这将产生以下结果

Ext.js 提示框

4. Ext.js 多行用户输入框

描述

这也像提示框，但它允许用户输入多线信息，而不只是一行。

语法

这里是简单的语法。

 

Ext.MessageBox.show({
   title: 'Details',
   msg: 'Please enter your details:',
   width:300,
   buttons: Ext.MessageBox.OKCANCEL,
   multiline: true,  // this property is for multiline user input.
   fn: callbackFunction
});

 

例

下面是一个简单的例子显示用法。

 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.Button', {
            renderTo: Ext.getElementById('msgBox'),
            text: 'Click Me',
            listeners: {
               click: function() {
                  Ext.MessageBox.show({
                     title: 'Details',
                     msg: 'Please enter your details:',
                     width:300,
                     buttons: Ext.MessageBox.OKCANCEL,
                     multiline: true,
                     fn: callbackFunction
                  });

                  function callbackFunction (){
                     Ext.Msg.alert('status', 'Details entered succesfully');
                  }
               }
            }
         });
      });
   </script>
</head>
<body>
   <p> Click the button for alert box </p>
   <div id = "msgBox" ></div>
</body>
</html>

这将产生以下结果 ：

Ext.js 多行用户输入框

5. Ext.js 是否取消框

描述

这就像确认框，它询问用户一些确认是否用户想要执行任务或拒绝或取消基于用户选择的任务不同的方法被调用。

句法

这里是简单的语法：

 

Ext.MessageBox.show({
   title: 'Details',
   msg: 'Please enter your details:',
   width:300,
   buttons: Ext.MessageBox.YESNOCANCEL // this button property for all three options YES, NO, Cancel.
});

 

例

下面是一个简单的例子显示用法：

 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.Button', {
            renderTo: Ext.getElementById('msgBox'),
            text: 'Click Me',
            listeners: {
               click: function() {
                  Ext.MessageBox.show({
                     title: 'Details',
                     msg: 'Please enter your details:',
                     width:300,
                     buttons: Ext.MessageBox.YESNOCANCEL,
                     multiline: true,
                     fn: callbackFunction
                  });

                  function callbackFunction (){
                     Ext.Msg.alert('status', 'Details entered succesfully');
                  }
               }
            }
         });
      });
   </script>
</head>
<body>
   <p> Click the button for alert box </p>
   <div id = "msgBox" ></div>
</body>
</html>

这将产生以下结果

Ext.js 是否取消框

AutoGen智能体开发：autogen_ext.agents.web_surfer包
王国平的博客
12-11 806
autogen_ext.agents.web_surfer
Android自动化测试技术——Espresso的使用
新一代螺丝工的博客
09-14 2119
在介绍的操作之前，我们先要看看如何自定义Matcher和ViewAction。MatcherMatcher是一个用来匹配视图的接口，常用的是它的两个实现类和:一些匹配的语法糖，可以让你创建一个给定的类型，而匹配的特定亚型的只有过程项匹配。 - 匹配器的期望类型。 - T的亚型:内部实现了空检查，检查的类型，然后进行转换示例:输入EditText值,如果值以000开头，则让内容为“成功”的TextView可见，否则让内容为失败的TextView可见.
ExtJS学习笔记(七) MessageBox
左手121
01-17 411
Ext.onReady(function () { // 自定义消息按钮的文本 Ext.window.MessageBox.prototype.buttonText = { ok: "确定", cancel: "取消", yes: "是", no: "否" }; Ext.create("Ext.windo
ExtJs系列(1)--Ext.MessageBox
net511的专栏
02-22 740
大家都知道，刚开始搞extjs的时候，很是有点困难，所以本人在新手刚入门后准备了这个系列的文章。个人认为用extjs做后台很不错，布局比较完美！1.Ext.MessageBox.alert()方法      有四个参数，为简单起见，主要介绍前面三个参数：      alert( title , msg , function(){} )      其中title，msg为必选参数，function为
ExtJs4 笔记（6） Ext.MessageBox 消息对话框
lvdong5830的专栏
12-21 211
本篇演示消息对话框的用法，ExtJs封装了可能用到的各类消息框，并支持自定义的配置。 如下是用到的html： [html] ? 1 2 3 4 5 6 7 8 9 &lt;h1&gt;各种消息框&lt;/h1&gt; &lt;div id="div1" class="content"&gt; &lt;button id="b...
js-message-box:用于定义和获取验证错误消息的程序包，并支持Meteor TrackerReact性
04-30
留言框 一个NPM包，用于定义和获取JavaScript中的验证错误消息。 流星应用程序可以通过Tracker来获得React式语言选择。 安装 $ npm i --save message-box 用法 定义消息 您可以根据需要定义全局默认值： MessageBox . defaults ( { initialLanguage : 'en' , // optional; default is 'en' messages : { en : { errorType : '{{name}} is invalid' || function , errorType : { _default : '{{name}} is invalid' || function , fieldName : '{{name}} is inval
EXT窗口Window及对话框MessageBox
10-28
ExtJS中窗口是由Ext.Window类定义，该类继承自Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。
ExtJS 学习系列（2）---Message Box 详解 （2）
weixin_33872660的博客
10-14 186
  3.Message Box API 简介（2） 接着上面的API继续介绍。   l getDialog() : Ext.Window 返回 Ext.Window 元素下的一个引用 参数: 无. Returns: Ext.Window   l hide() : Ext.MessageBox 把显示着的当前message box隐藏起来。 参数: 无. Return...
ExtJS 学习系列（2）---Message Box 详解 （1）
weixin_34217773的博客
10-14 160
    1.回顾       上一讲在入门的配置中，简单的介绍了ExtJS的下载和配置。简单用一个Message box 显示了通俗的Hello world 对话框的弹出。究竟Message是如何使用的，事件是如何触发的呢。ExtJS提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监控控件状 态变化、更新控件视图信息、与服务器进行交互等等。事件统一由Ext.Even...
Ext.js 4 部分基础内容学习记录
最新发布
积累、分享。聚沙成塔
07-29 1717
ext.js 4
Ext.MessageBox.alert如何调节自适应宽度
05-05
你可以在定义消息框的时候，设置 `minWidth` 和 `maxWidth` 属性来控制消息框的最小和最大宽度。例如： ``` Ext.MessageBox.alert({ title: '提示', message: '这是一条提示消息', minWidth: 300, // 最小宽度为...
ext中消息框、提示框、确认框显示在最前面的解决方法
05-26
在使用 ext 中的消息框、提示框、确认框时，可以通过设置 `zIndex` 属性来调整它们的层级，使其显示在最前面。 具体操作步骤如下： 1. 在创建消息框、提示框、确认框时，添加 `zIndex` 属性，如： ``` Ext.Msg....
Ext.js组件：Message box 消息框
qq_36987708的博客
01-14 351
Ext.js 消息框Message Box 消息框基本上用于以警报框的形式显示数据 消息框是显示某些事件发生时的一些警报信息。 Ext JS有不同的消息框： 编号 消息框 1 Basic alert box 这是最简单的警报框只是为了显示一些事件的一些信息。 2 Confirm box 此消息框要求用户确认以及对不同选项用户选择调用的不同方法为y...
Extjs弹窗控件——Ext.MessageBox
Kuroko's Development Notes
02-13 6994
首先，浏览器自带的弹窗有alert、confirm、prompt等。js弹窗的3种方式：alert、confirm、prompt 鉴于其外观丑陋以及配置不方便，我们常采用Extjs自带的弹窗控件。   // 基本的alert: Ext.Msg.alert('Status', 'Changes saved successfully.'); // 用户对话框，用一个回调函数处理结果: Ext...
Ext JS 4 (5) —— Ext.MessageBox.show()
龙井的专栏
04-11 229
在介绍了 alert( ), confirm( ) 和 prompt( ) 后，在 Ext.Message 里还有一个很重要方法 show( ) ，它是 Ext 自定义的一个消息框，不同于之前介绍的其他消息框，都是预制好了很多属性的，只需加入标题、消息、和函数就可以工作了，而 show( ) 是完全由用户自定义的消息框，配置项如下图所示： 能写的都写在上面了，下面就举几个例子： 例一： 用...
ExtJS学习之MessageBox
不如一默
08-19 1203
公共属性 公共属性 类型 描述 CANCEL Object 按钮配置，显示单个“Cancel”按钮 ERROR String CSS类，提供了ERROR图标的图片 INFO String CSS类，提供了INFO图标的图片 Msg Object Ext.MessageBox的缩写 OK
Ext JS 消息提示框
wangchunbo的博客空间
09-12 959
Ext JS消息框
ExtJS 的 各种提示框
weixin_42307069的博客
01-06 1775
ExtJS 的 提示框：alert、confirm、prompt、toast
Ext JS 4 (4) —— Ext.MessageBox.prompt()
龙井的专栏
04-11 953
上一节我们讲了 confirm 消息框的用法，这节继续讲下一个消息框 prompt ，和 JS 里的也一样，在Ext中的用法和 alert 、confirm 也相差不多，先看下 API 文档： 我 们发现前四个参数与 alert 和 confirm 的一样，prompt 消息框多了两个参数，第五个参数如果是 boolean 类型的 true 则表示消息框中的输入框是多行的，false 则表...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值