日期:2014-05-16  浏览次数:20329 次

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