Ext--MessageBox教程

于 2008-08-28 10:31:58 发布 · 90 阅读

文章标签：

#EXT #JavaScript #CSS #F# #HTML #ViewUI

ext 专栏收录该内容

3 篇文章

订阅专栏

本文介绍使用ExtJS创建各种消息框的方法，包括提示框、选择框、对话框及带有进度显示的消息框等。通过实际代码示例展示了如何在网页应用中集成这些交互组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
	    <link rel="stylesheet" type="text/css" href="./ext-all.css" />
		<script type="text/javascript" src="./ext-base.js"></script>
		<script type="text/javascript" src="./ext-all.js"></script>

		<script type="text/javascript">
			// 一定要 onReady开始 不然第一次点击按钮会没有反映，要点击第二次才有反映的，因为第一次点击变成加载了！
			Ext.onReady(function(){
				//alert 提示框 
			    Ext.get('mb8').on('click', function(e){
			        Ext.MessageBox.alert('Status', 'Changes saved successfully.',showResult);
			    });
		
				// 选择框
			    Ext.get('mb1').on('click', function(e){
			         Ext.MessageBox.confirm('选择','你是否确定?',showResult);
			    });
				
				// 对话框
			    Ext.get('prompt').on('click', function(e){
			         Ext.MessageBox.prompt('对话框','请输入你的名字?',showResult2);
			    });
				
				// 文本域对话框
			    Ext.get('mprompt').on('click', function(e){
					 Ext.MessageBox.show({
						   title: 'Address',
						   msg: 'Please enter your address:',
						   width:300,
						   buttons: Ext.MessageBox.OKCANCEL,
						   multiline: true,
						   fn: showResult2,
						   animEl: 'mprompt'
					   });
			    });
				
				//进度条
				Ext.get('progress').on('click', function(){
					Ext.MessageBox.show({
					   title: 'Please wait',
					   msg: 'Loading items...',
					   progressText: 'Initializing...',
					   width:300,
					   progress:true,
					   closable:false,
					   animEl: 'mb6'
				   });

				   // this hideous block creates the bogus progress
				   var f = function(v){
						return function(){
							if(v == 12){
								Ext.MessageBox.hide();
								//Ext.example.msg('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('save').on('click', function(){
				//	alert(Ext.MessageBox.ERROR);
			        Ext.MessageBox.show({
			           msg: 'Saving your data, please wait...',
			           progressText: 'Saving...',
			           width:300,
			           wait:true,
			           waitConfig: {interval:200},
			           icon:Ext.MessageBox.INFO, //这里可以自定义图片的，要修改到 ext-all.css 文件里面(个人做法)
			           animEl: 'save'
			       });
				   
			       setTimeout(function(){
			            //This simulates a long-running operation like a database save or XHR call.
			            //In real code, this would be in a callback function.
			           Ext.MessageBox.hide();
			            //Ext.example.msg('Done', 'Your fake data was saved!');
						Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        }, 8000);
			    });
	
				function showResult(btn){
					Ext.MessageBox.alert('内容',btn);
				}
				function showResult2(btn,text){
					if(btn == 'ok')
						Ext.MessageBox.alert('内容2',text);
					else
						Ext.MessageBox.alert('内容2',btn);
				}
			});
		</script>
	</head>
	<body>
		<center>
			<div style="width:800px;height:300px;border:1px groove pink">
				<table style='width:800px;height:300px'>
					<tr>
						<td>
							<button id='mb1' style='width:128px'>Confirm </button>
						</td>
					</tr>
					<tr>
						<td>
							<button id='mb8' style='width:128px'>Alert</button>
						</td>
					</tr>
					<tr>	
						<td>
							<button id='progress' style='width:128px'>Progress </button>
						</td>
					</tr>
					<tr>		
						<td>
							<button id='save' style='width:128px'>Save </button>
						</td>
					</tr>
					<tr>		
						<td>
							<button id='prompt' style='width:128px'>Prompt </button>
						</td>
					</tr>
					<tr>		
						<td>
							<button id='mprompt' style='width:128px'>M Prompt </button>
						</td>
					</tr>
				</table>
			</div>
		</center>
	</body>
</html>

有些源码和样式我都进行修改过！如果需要可以下载来看！