ExtJS 4.2.1 Ext.MessageBox 用法实例

最新推荐文章于 2021-08-05 12:42:59 发布

TRAMP_ZZY

最新推荐文章于 2021-08-05 12:42:59 发布

阅读量129

点赞数

分类专栏： extjs4.2.1 文章标签： ExtJS 4.2.1 MesageBox

本文链接：https://blog.csdn.net/TRAMP_ZZY/article/details/84587779

版权

extjs4.2.1 专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>auto layout布局</title>
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/ext-theme-neptune/ext-theme-neptune-all.css">
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/ext-all.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/ext-lang-zh_CN.js"></script>
	<script type="text/javascript">
	Ext.onReady(function () {

		Ext.get("btn1").on("click",  function() {
			Ext.Msg.alert("tips", "clicked!");
		});

		// YES NO MessageBox
		Ext.get("btn2").on("click",  function() {
			Ext.Msg.confirm('tips', 'to do it ?', function (btnId) {
				if (btnId == 'yes') {
					Ext.Msg.alert('tips', 'yes');
				} else if (btnId == 'no') {
					Ext.Msg.alert('tips', 'no');
				} else {
					alert('nothing to do, closed!');
				}
			});
		});

		// 单行输入框
		Ext.get('btn3').on('click', function () {
			Ext.Msg.prompt("tips", "input you name", function (btnId, text) {
				if (btnId == 'ok') {
					Ext.Msg.alert('tips', text);
				} else {
					Ext.Msg.alert('tips', 'cancled');
				}
			});
		});

		// 多行输入框 
		Ext.get('btn4').on('click', function () {
			Ext.Msg.prompt("tips", "input you name", function (btnId, text) {
				if (btnId == 'ok') {
					Ext.Msg.alert('tips', text);
				} else {
					Ext.Msg.alert('tips', 'cancled');
				}
			}, window, true);
		});
		// 第五个参数显示默认文字， 第四个参数表明是多行还是单行
		Ext.get('btn4').on('click', function () {
			Ext.Msg.prompt("tips", "input you name", function (btnId, text) {
				if (btnId == 'ok') {
					Ext.Msg.alert('tips', text);
				} else {
					Ext.Msg.alert('tips', 'cancled');
				}
			}, window, false, 'default text');
		});

		// Show function
		// buttons 的可选类别
		// Ext.MessageBox.CANCLE Ext.MessageBox.ERROR Ext.MessageBox.INFO
		// Ext.MessageBox.NO Ext.MessageBox.OK Ext.MessageBox.OKCANCEL
		// Ext.MessageBox.QUCANCEL Ext.MessageBox.WARNING Ext.MessageBox.YES
		// Ext.MessageBox.YESNOCANCEL
		// icon 的可选类别
		// Ext.MessageBox.INFO;Ext.MessageBox.WARNING;
   		// Ext.MessageBox.QUESTION; Ext.MessageBox.ERROR;
		Ext.get('btn5').on('click', function(e){
		      Ext.MessageBox.show({
		         title:'Save Changes?',
		         msg: 'You are closing a tab that has unsaved changes. <br />Would you like to save your changes?',
		         buttons: Ext.MessageBox.YESNOCANCEL,
		         fn: function (btnId) {
		        	 Ext.Msg.alert('tips', btnId);
		         },
		         animateTarget: 'mb4',
		         icon: Ext.MessageBox.QUESTION
		     });
		 });

		// progress bar
		   Ext.get('btn6').on('click', function(){
		        Ext.MessageBox.show({
		           title: 'Please wait',
		           msg: 'Loading items...',
		           progressText: 'Initializing...',
		           width:300,
		           progress:true,
		          // closable:false,
		           animateTarget: 'btn6'
		       });

		       // this hideous block creates the bogus progress
		       var f = function(v){
		            return function(){
		                if(v == 12){
		                    Ext.MessageBox.hide();
		                    Ext.MessageBox.alert('Done', 'Your fake items were loaded!');
		                }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('btn7').on('click', function(){
		        Ext.MessageBox.show({
		            title: 'What, really?',
		            msg: 'Are you sure?',
		            buttons: Ext.MessageBox.YESNO,
		            buttonText:{ 
		                yes: "Definitely!", 
		                no: "No chance!" 
		            },
		            fn: function (btnId) {
		            	Ext.Msg.alert("tips", btnId);
		            }
		        });
		    });
	});
	</script>
</head>
<body>
<button id="btn1">btn1</button><br />
<button id='btn2'>btn2</button> <br />
<button id='btn3'>btn3</button> <br />
<button id='btn4'>btn4</button> <br />
<button id='btn5'>btn5</button> <br />
<button id='btn6'>btn6</button> <br />
<button id='btn7'>btn7</button> <br />
</body>
</html>

TRAMP_ZZY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS 4.2.1 Ext.MessageBox 用法实例

[code="js"]auto layout布局 Ext.onReady(function () { Ext.get("btn1").on("click", function() { Ext.Msg.alert("tips", "clicked!"); }); // YES NO MessageBox...
复制链接

扫一扫