`
msyspacer
  • 浏览: 9923 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

ExtJS MessageBox相关

 
阅读更多

静态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);
	}
});
 
分享到：
| Flex4 画面常见问题备忘
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    自定义MessageBox的按钮属性

    用钩子函数实现的自定义MessageBox，可以修改按钮的文字等属性

    ExtJS如何自定义图片按钮组件

    1.ExtJS自定义组件，图片按钮为例. 2.此图片按钮背景完全为图片，没有边框，需要使用者提供2张图片，一张初始化用，一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...

    Extjs学习笔记之一 初识Extjs之MessageBox

    在使用`MessageBox`之前，我们需要引入ExtJS的相关资源文件。在示例代码中，我们看到`&lt;link&gt;`标签引入了CSS样式表，而`&lt;script&gt;`标签则引入了`ext-base-debug.js`和`ext-all-debug.js`两个JavaScript文件，这是...

    ExtJs消息提示框

    ExtJs是一种基于JavaScript的富客户端应用框架，由Sencha公司开发。它提供了丰富的组件库，用于构建复杂的Web应用程序。在ExtJs中，消息提示框（Notification）是用户界面交互的一个重要元素，它能够向用户显示各种...

    extjs 进度条的显示

    在IT领域，特别是前端开发...通过使用`Ext.MessageBox.show()`及其相关方法，你可以轻松地在你的Web应用程序中集成进度条，从而提高用户的满意度和整体体验。理解并掌握这些技术细节，将使你在开发过程中更加得心应手。

    ExtJs官方网站中文的入门指南 javascript

    ### ExtJs官方网站中文的入门指南知识点详解 #### 一、ExtJs简介与环境搭建 **ExtJs**是一款基于JavaScript的企业级Web应用开发框架，它提供了丰富的UI组件和强大的功能，帮助开发者快速构建高性能的Web应用程序。...

    extjs弹出框 n秒后消失

    实现EXTJS弹出框在n秒后自动消失，我们可以利用EXTJS的定时器（Ext.util.DelayedTask）和弹出框（Ext.MessageBox）的配置选项。下面我们将详细讨论如何实现这个功能。 首先，EXTJS的弹出框主要通过`Ext.MessageBox....

    ExtJs入门实例.doc

    本文将围绕ExtJs2.0入门实例，重点讲解Ext.MessageBox的使用，包括其基本方法和配置选项，帮助初学者快速掌握这一核心功能。 1. **Ext.MessageBox.alert()** `Ext.MessageBox.alert()`方法用于显示简单的警告...

    ExtJs自定义消息框

    ExtJs中的提示框通过`Ext.MessageBox.alert`方法创建。 **语法：** ```javascript Ext.MessageBox.alert(String title, String msg, Function fn, Object scope); ``` - **title**：字符串类型，用于设置消息框的...

    ExtJs4.0 表单提交Demo

    - 为了提高用户体验，可以在表单提交时显示加载动画，通过`Ext.MessageBox.show`实现。 - 验证数据完整性，避免无效数据提交，可以使用`form.isValid()`检查表单是否有效。 7. **实际应用** 这样的表单提交示例...

    EXTjs4类似qq消息提醒

    "参考网址.txt"则可能包含了一些EXTjs4官方文档或者有关EXTjs4通知组件的教程链接，供进一步学习和参考。 在实际开发中，为了使消息提醒更加贴近用户需求，还可以考虑以下几点： - 自定义样式：EXTjs4允许开发者...

    Extjs 3.0 中文API

    9. **工具提示（Tooltip）和提示框（MessageBox）**：提供美观且功能强大的提示信息，增强用户体验。 10. **国际化（Internationalization, i18n）**：支持多语言，方便创建面向全球用户的Web应用。 11. **AJAX...

    Extjs Ext.MessageBox.confirm 确认对话框详解

    Ext.MessageBox.confirm&#40;&#41;详解 显示一个确认对话框，用来代替JavaScript标准的confirm&#40;&#41;方法，具有两个按钮“是”...//相关内容 返回值： Ext.MessageBox 代码示例： 代码如下: &lt;script type=”tex

    Extjs4.2入门详细文档以及表格初级制作

    接下来介绍如何在项目中正确引入Extjs4.2的相关文件： - **locale**下的`ext-lang-zh_CN.js`：如果需要支持简体中文，则必须引入该文件。 - **resources**下的`ext-theme-classic`：该目录包含了Extjs的主题文件，...

    Ext_MessageBox

    根据给定的信息，我们可以深入探讨ExtJS中`Ext.MessageBox`组件的使用方法及特性。`Ext.MessageBox`是ExtJS框架中用于显示模态对话框的一个非常实用的功能组件，它可以用来展示提示信息、请求用户输入、确认操作等。...

    ExtJS实现文件下载

    在本文中，我们将深入探讨如何使用ExtJS框架来实现文件下载功能。ExtJS是一个流行的JavaScript库，用于构建桌面级的Web应用程序，它提供了丰富的组件和功能，包括与服务器的交互，如文件下载。 首先，我们要了解`...

    extjs入门之helloword

    由于描述部分是空的，我们将主要依据标题和标签来探讨相关知识点。 首先，让我们来看看“源码”这个标签。在学习任何编程技术时，源码都是重要的学习材料。对于ExtJS，理解其源码可以帮助我们深入掌握组件的构建...

Magicbox
Global site tag (gtag.js) - Google Analytics