ExtJS MessageBox相关

最新推荐文章于 2017-02-13 13:45:37 发布
最新推荐文章于 2017-02-13 13:45:37 发布
阅读量126 收藏
点赞数
分类专栏： ExtJS 文章标签： javascript ViewUI

静态MessageBox，代码包含注释，不需要的方法先要注释掉

<html>
	<head>
		<title>ExtJs-JSON</title>
		<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
		<script type="text/javascript" src="ext-all.js"></script>
		<script type="text/javascript" src="bootstrap.js"></script>
		<script type="text/javascript" src="locale/ext-lang-zh-CN.js"></script>
		<script type="text/javascript">

		Ext.onReady(function() {
			// Ext.MessageBox.alert(title,text,callback);
			Ext.MessageBox.alert('Alert','Show Alert',callBack);
			function callBack(id) {
				Ext.MessageBox.alert('Result','<font color=red>' + id + '</font>');
			}
		});

		Ext.onReady(function() {
			// Ext.MessageBox.prompt(title,text,callback,scope,multilines,defaulttext);
			Ext.MessageBox.prompt('Prompt','Input some text: ',callBack,this,true,'DefaultValue');
			function callBack(id,msg) {
				Ext.MessageBox.alert('Result','<font color=red>' + id + '</font></Br>' + msg);
			}
		});

		Ext.onReady(function() {
			// Ext.MessageBox.confirm(title,text,callback);
			Ext.MessageBox.confirm('Confirm','Click me!',callBack);
			function callBack(id,msg) {
				Ext.MessageBox.alert('Result','<font color=red>' + id + '</font></Br>' + msg);
			}
		});

		Ext.onReady(function() {
			// Ext.MessageBox.wait(title,text,properties);
			Ext.MessageBox.wait('Waiting','Wait!',{text:'Processing!'});
		});

		Ext.onReady(function(){
			// Ext.MessageBox.show(properties);
			Ext.MessageBox.show({
						title:'Tip',
						msg: 'justwe',
						modal: true,
						prompt: true,
						value: "input",
						fn: callBack,
						buttons: Ext.Msg.YESNOCANCEL,
						icon: Ext.Msg.QUESTION, 
					});
			function callBack(id,msg) {
				Ext.MessageBox.alert('Result','<font color=red>' + id + ' ' + msg'</font>');
			}
		});
		</script>
	</head>
	<body>
		
	</body>
</html>

 稍微加点动态因素

<html>
	<head>
		<title>ExtJs-JSON</title>
		<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
		<script type="text/javascript" src="ext-all.js"></script>
		<script type="text/javascript" src="bootstrap.js"></script>
		<script type="text/javascript" src="locale/ext-lang-zh-CN.js"></script>
		<script type="text/javascript">

		Ext.onReady(function(){
			// update text show time
			var msgBox = Ext.MessageBox.show({
						title:'Tip',
						msg: 'show time',
						modal: true,
						buttons: Ext.Msg.OK,
						fn: function() {
							Ext.TaskManager.stop(task);
						}
					})
			var task = {
				run:function() {
					msgBox.updateText('<font color=red>Time:  ' + Ext.util.Format.date(new Date(),'Y-m-d g:i:s A</font>'));
				},
				interval:1000
			}
			Ext.TaskManager.start(task);
		});

		Ext.onReady(function() {
			var msgBox = Ext.MessageBox.show({
				title:'Tip',
				msg: 'show process',
				modal: true,
				width:300,
				progress:true
			})

			var count = 0;
			var percentage = 0;
			var progressText = '';

			var task = {
				run: function() {
					count++;
					percentage = count/10;
					progressText = 'Processing: ' + percentage*100 + '%';
					msgBox.updateProgress(percentage,progressText,'<font color=red>Now time: ' + Ext.util.Format.date(new Data(),'Y-m-d g:i:s A</font>'));

					if (count > 10) {
						Ext.TaskManager.stop(task);
						msgBox.hide();
					}
				},
				interval:1000 
			}

			Ext.TaskManager.start(task);
		});
	
		</script>
	</head>
	<body>
		
	</body>
</html>

 

 来个综合的示例

messagebox_all.html

 

<html>
	<head>
		<title>消息框综合演示</title>
		<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
		<script type="text/javascript" src="ext-all.js"></script>
		<script type="text/javascript" src="bootstrap.js"></script>
		<script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script>
		<script type="text/javascript" src="messagebox_all.js"></script>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
	</head>
	<body>
		<h1><font color="red">消息框综合演示</font></h1>
		<p>
			<b>Alert</b><br/>
			只有OK的确认框&nbsp;&nbsp;
			<button id="show_alert">演示</button>
		</p>
		<p>
			<b>Confirm</b><br/>
			带有YES||NO的选择框&nbsp;&nbsp;
			<button id="show_confirm">演示</button>
		</p>
		<p>
			<b>Prompt</b><br/>
			带有文本输入的对话框&nbsp;&nbsp;
			<button id="show_prompt">演示</button>
		</p>
		<p>
			<b>Show</b><br/>
			自定义对话框&nbsp;&nbsp;
			<button id="show_show">演示</button>
		</p>
		<p>
			<b>Progress</b><br/>
			带有进度条的对话框（手动）&nbsp;&nbsp;
			<button id="show_progress">演示</button>
		</p>
		<p>
			<b>Progress_plus</b><br/>
			带有进度条的对话框（自动）&nbsp;&nbsp;
			<button id="show_progress_plus">演示</button>
		</p>
		<p>
			<b>Icon</b><br/>
			带有图标的自定义按钮对话框（手动）&nbsp;&nbsp;
			<button id="show_icon">演示</button>
		</p>
	</body>
</html>
   messagebox_all.js

 

Ext.onReady(function() {

	Ext.get('show_alert').on('click',function(e) {
		Ext.MessageBox.alert('演示','<h4><font color=green>点击了alert</font></h4>',null);
	});

	Ext.get('show_confirm').on('click',function(e) {
		Ext.MessageBox.confirm('演示','<h4><font color=green>点击了confirm</font></h4>',null);
	});

	Ext.get('show_prompt').on('click',function(e) {
		Ext.MessageBox.prompt('演示','<h4><font color=green>点击了prompt</font></h4>',show_result,this,true,'请在此处输入');
	});	

	Ext.get('show_show').on('click',function(e) {
		Ext.MessageBox.show({
			title: '演示',
			msg: '<h4><font color=green>点击了show</font></h4>', 
			modal:true,
			buttons: Ext.Msg.YESNOCANCEL,
			fn:function(id) {
				Ext.MessageBox.alert('结果','<h4><font color=red>' + id + '</font></h4>',null);
			}
		});
	});

	Ext.get('show_progress').on('click',function(e) {
		 Ext.MessageBox.show({
           title: '演示',
           msg: '读取中，请等待...',
           progressText: '加载中...',
           width:300,
           progress:true,
           closable:false,
           animateTarget: 'show_progress'
       });

       var f = function(v){
            return function(){
                if(v == 12){
                    Ext.MessageBox.hide();
                    show_result('完成', '加载完成!');
                }else{
                    var i = v/11;
                    Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
                }
           };
       };
       for(var i = 1; i < 13; i++){
           setTimeout(f(i), i*500);
       }
	});

	Ext.get('show_progress_plus').on('click',function(e) {
		  Ext.MessageBox.show({
           title: '演示',
           msg: '读取中，请等待...',
           progressText: '加载中...',
           width:300,
           wait:true,
           waitConfig: {interval:200},
           iconHeight: 50,
           animateTarget: 'show_progress_plus'
       });
        setTimeout(function(){
            Ext.MessageBox.hide();
            show_result('完成', '加载完成!');
        }, 8000);
	});

	Ext.get('show_icon').on('click', function(){

        Ext.MessageBox.show({
           title: '对话框提示图标',
           msg: '注意左边的图标!',
           buttons: Ext.MessageBox.OK,
           buttonText:{
           		ok:'了解'
           },
           animateTarget: 'show_icon',
           icon: Ext.Msg.QUESTION, 
           fn:function(id) {
				Ext.MessageBox.alert('结果','<h4><font color=red>' + id + '</font></h4>',null);
			}
       });
    });

	function show_result(id,msg) {
		Ext.MessageBox.alert('结果','<h4><font color=red>' + msg + '</font></h4>',null);
	}
});
 
LUKA530230
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs学习笔记之一 初识Extjs之MessageBox
10-29
去官网下载好extjs的压缩包，解压缩之后得到如下目录结构。
ExtJS学习之MessageBox
不如一默
08-19 993
公共属性 公共属性 类型 描述 CANCEL Object 按钮配置，显示单个“Cancel”按钮 ERROR String CSS类，提供了ERROR图标的图片 INFO String CSS类，提供了INFO图标的图片 Msg Object Ext.MessageBox的缩写 OK
ExtJS Ext.MessageBox.alert()弹出对话框详解
xiaolang85的专栏
11-28 1477
Ext.MessageBox是一个工具类，他继承自Obiect对象，用来生成各种风格的信息提示对话框，Ext.Msg是该类的别名，使用Ext.MessageBox和用Ext.Msg效果是一样的，而后者提供了更简单的方式。 Ext.onReady(function() { Ext.Msg.alert('提示', '逗号分隔参数列表'); //这种方式非常常见的 }); 效果图：
Extjs弹窗控件——Ext.MessageBox
Kuroko's Development Notes
02-13 6450
首先，浏览器自带的弹窗有alert、confirm、prompt等。js弹窗的3种方式：alert、confirm、prompt 鉴于其外观丑陋以及配置不方便，我们常采用Extjs自带的弹窗控件。   // 基本的alert: Ext.Msg.alert('Status', 'Changes saved successfully.'); // 用户对话框，用一个回调函数处理结果: Ext...
ExtJs学习之MessAgeBox的使用
Coco5419的博客
11-05 180
1、Ext.MessageBox.alert() 　　调用格式： 　　alert( String title, String msg, [Function fn], [Object scope] ) 　　参数说明： 　　title：提示框的标题。 　　msg：显示的消息内容。 　　[Function fn]：（可选）回调函数。 　　[Object scope]：（可选）回调...
ExtJs2.0学习系列(1)--Ext.MessageBox
知 行 合 一
07-18 692
大家都知道，刚开始搞extjs的时候，很是有点困难，所以本人在新手刚入门后准备了这个系列的文章。个人认为用extjs做后台很不错，布局比较完美！1.Ext.MessageBox.alert()方法      有四个参数，为简单起见，主要介绍前面三个参数：      alert( title , msg , function(){} )      其中title，msg为必选参数
Extjs Ext.MessageBox.confirm 确认对话框详解
10-29
显示一个确认对话框，用来代替JavaScript标准的confirm()方法，具有两个按钮“是”和“否”如果为其提供一个回调函数，则该函数将在单击按钮后被调用(包括右上角的推出按钮)，所单击按钮的id将被作为唯一的...
ExtJS Ext.MessageBox.alert()弹出对话框详解
10-29
Ext.MessageBox是一个工具类，他继承自Obiect对象，用来生成各种风格的信息提示对话框，Ext.Msg是该类的别名，使用Ext.MessageBox和用Ext.Msg效果是一样的，而后者提供了更简单的方式。
自定义MessageBox的按钮属性
07-31
用钩子函数实现的自定义MessageBox，可以修改按钮的文字等属性
(7)Extjs4.2 MessageBox的三种用法和 进度条
pandaj的专栏
12-12 3880
示例-6(002)：MessageBox的三种用法和 进度条 //★Ext.onReady在DOM模型加载完毕就会执行 Ext.onReady(function(){ /* ★Ext.MessageBox.alert() 这个方法用来打开一个普
ext4 学习笔记（二） [Ext.window.MessageBox]（白鹤翔第一季）
cnsu-cmh
10-31 1101
首先说明一下： （1）本文章是针对于ExtJs 4.X ，文章中出现的5版本只是我引入的文件是ExtJs.5.0,并不是文章是基于5版本，文章是4版本的 （2）由于注释很全，所以文章内容就不写那么详细了，直接贴代码还望读者能够理解 Ext.onReady：这个方法是Ext的准备函数，也就是Ext相关的代码都会在这个函数里书写，它比较类似于window的onload方法，但是注意其
Extjs-弹出窗口 Ext.MessageBox
itlwc
08-14 3442
1.Ext.MessageBox.alert() 第一个参数是修改窗口的标题, 第二个参数用来决定窗口的内容, 第三个参数是关闭按钮之后执行的回调函数 Ext.MessageBox.alert('标题', '内容', function(btn) { alert('你刚刚点击了 ' + btn); }); 2.Ext.MessageBox.confirm() confi
ExtJS的MessageBox总结
weixin_34199335的博客
03-20 66
自己写了个ExtJS的MsgBox的小模版，以后遇到需要使用提示的地方就拿过来改改，免得每次都重新写。 1 　　　　 /**MsgBox start**/ 2 Ext.Msg.buttonText.yes = "是"; 3 Ext.Msg.buttonText.no = "否"; 4 Ext.Msg.buttonTe...
ExtJs4 笔记（6） Ext.MessageBox 消息对话框
lvdong5830的专栏
12-21 134
本篇演示消息对话框的用法，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...
Ext.MessageBox【转】
weixin_30695195的博客
12-23 142
1.Ext.MessageBox.alert()方法有四个参数：alert( title , msg , function(){} ，this)其中title，msg为必选参数，function为可选参数，在关闭弹出窗口后触发,可以传入点击的按钮的id，第四个参数scope:指回调函数作用域。 Ext.Msg.alert(“Notice”,”hello world!”); //alert会阻塞...
ExtJs提示框（Ext.MessageBox.confirm）
生活没了创意，那跟咸蛋有什么区别
12-16 7255
删除信息前，弹出的确认框（提示框），代码如下。 Ext.MessageBox.confirm('提示','确认删除该信息？',goDelete); function goDelete(btn){ //alert("the pressed button is '"+btn+"'"); if(btn=="yes"){ Ext.Aj
ExtJS Ext.MessageBox.alert()弹出对话框详解
热门推荐
bzhyan的专栏
11-20 1万+
Ext.onReady(function() {               Ext.Msg.alert(提示, 逗号分隔参数列表); //这种方式非常常见的           });效果图： Ext.onReady(function() {           //定义 JSON(配置对象)           var config = {         
ExtJS java
最新发布
03-10
ExtJS是一个用于构建富客户端Web应用程序的JavaScript框架。它提供了丰富的UI组件和强大的数据处理功能，使开发人员能够轻松地创建交互性强、用户体验良好的Web应用程序。 在上述引文中，提到了一个个人/家庭收支...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值