`
fys124974704
  • 浏览: 138495 次
  • 性别: Icon_minigender_1
  • 来自: 火星
社区版块
存档分类
最新评论

Ext--MessageBox教程

    博客分类:
  • ext
阅读更多
<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>

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

分享到:
评论
1 楼 fys124974704 2008-12-11  
?改变什么位置

相关推荐

    Ext教程ext2-Ext简易教程

    Ext.MessageBox.alert("你好", "wayfoon"); }); ``` Ext的布局系统是其强大功能的关键之一,提供了多种布局方式以适应不同的设计需求。常见的布局包括: 1. Accordion布局:这种布局将子组件折叠在一起,一次只...

    Ext教程_javakc

    Ext.MessageBox.alert("hello", "Hello World"); }); ``` ### 5. 实战案例 除了简单的消息框之外,还可以创建更复杂的用户界面组件,例如窗口。下面的示例展示了如何创建一个带有标题、宽度、高度和内容的窗口:...

    3------通过实例学习------Ext.js------.docx

    2. **docs**:这里是Ext.js的开发文档,包含了详细的API参考和教程,对于开发者来说是不可或缺的学习资源。 3. **locale**:存储了不同国家和地区语言的资源文件,方便进行多语言支持。 4. **packages**:这个目录...

    EXT 完美教程

    // 使用Ext MessageBox显示'Hello World!' Ext.MessageBox.alert('', 'Hello World!'); }); ``` EXT JS中的表单是其强大功能的一部分,提供了多种表单控件,如TextField、TextArea、DateField、TimeField、...

    ext 教材 ext js 教程

    EXT JS 教材和教程的目标是帮助开发者更好地理解和掌握这个框架,从而提升他们的Web开发技能。 EXT JS 中的 MessageBox 是一个非常实用的组件,它用于创建各种类型的对话框,如警告、确认和提示。下面我们将详细...

    Ext教程.pptExt教程.pptExt教程.ppt

    Ext.MessageBox.alert("hello", "wayfoon"); }); ``` Ext支持多种布局方式,用于组织和管理组件在页面上的显示。这些布局包括: 1. **Accordion布局**:这种布局将容器内的子元素设置为可折叠的形式,每个子元素...

    EXT教程EXT用大量的实例演示Ext实例

    Ext提供了多种弹出窗口组件,如MessageBox等,这些组件可自定义各种动画效果和布局,甚至可以在弹出窗口中嵌入表格和表单。Ext JS对布局的处理很灵活,可以轻松实现不同浏览器中的统一布局效果。其中BorderLayout是...

    ext的课件,ppt版,适合有面向对象基础人士

    最简单的Ext使用示例是在`Ext.onReady`函数中调用`Ext.MessageBox.alert`来弹出一个警告对话框,如`Ext.MessageBox.alert("hello","wayfoon");`所示。 在Ext中,页面布局扮演着至关重要的角色。有四种基本布局模式...

    Ext介绍以及_ext页面布局

    最新提及的版本是Ext2.2,本教程将基于这个版本进行讲解。 使用ExtJS,首先需要引入必要的CSS和JavaScript文件。`ext22/resources/css/ext-all.css`是样式文件,提供了ExtJS的视觉样式。接着,`ext22/adapter/ext/...

    extjs入门教程

    Ext.MessageBox.alert("Hello World!"); }) ``` - **注意**: - 严格区分大小写。 - 缺少任何符号都会导致执行失败。 - 若使用 4.0 版本,则需要引入 `ext-all.css`、`ext-all.js` 和 `bootstrap.js`...

    EXT中文教程

    ### EXT中文教程知识点详解 #### 1. EXT简介与核心概念 EXT,即Ext JS,是一种基于JavaScript的开源框架,用于构建复杂的Web应用程序。它提供了一系列丰富的用户界面组件,简化了DOM操作,使得开发者能够轻松地...

    EXT2.0中文教程

    5.2.2. Ext.MessageBox.confirm() 5.2.3. Ext.MessageBox.prompt() 5.3. 如果你想的话,可以控制得更多 5.3.1. 可以输入多行的输入框 5.3.2. 再看一个例子呗 5.3.3. 下一个例子是进度条 5.3.4. 动画效果,跳出来,缩...

    详细讲解了Ext相关知识,Ext实例教程

    本教程主要讲解Ext的相关知识,特别是如何使用JSON对象和Ext MessageBox的功能。 首先,我们来看JSON(JavaScript Object Notation)对象在ExtJS中的应用。JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时...

    ext中文教程

    ### EXT中文教程知识点详解 #### 1. EXT简介 Ext 是一款基于 JavaScript 的开源前端框架,主要用于构建交互式 Web 应用程序。它提供了一系列丰富的 UI 组件和强大的功能,如表格、表单、菜单、工具栏等,帮助...

    EXT开发文档

    - **EXT** 官方文档提供了丰富的资源,包括教程、API 文档等,可以帮助开发者深入了解 **EXT** 的各个部分。 - 学习 **EXT 2** 的新特性也是很有帮助的,如组件模型、容器模型、布局等。 通过上述知识点的学习,...

    ExtJs教程.pdf

    标题为"ExtJs教程.pdf"以及描述为"ExtJs教程.pdf"的文件内容涉及了ExtJs框架中MessageBox组件的使用方法,包括其弹出框函数的介绍和配置参数说明。ExtJs是一个用于构建交互式Web应用程序的JavaScript框架,它提供了...

    EXT 中文手册内具实例代码

    - 示例:`Ext.MessageBox.alert('标题', '消息内容');` - **Grid**:用于展示表格数据的控件。 - 示例:定义数据模型、列模型,并创建 Grid 组件。 - **更多控件**:还包括 TabPanel、Form Panel 等多种控件,满足...

    extjs基础教程pdf

    - `icon`: 对话框内容前面的图标,可以是`Ext.MessageBox.INFO`, `Ext.MessageBox.ERROR`, `Ext.MessageBox.WARNING`, `Ext.MessageBox.QUESTION`。 - `width`: 对话框的宽度,单位默认为像素。 - `prompt`: 设为...

Global site tag (gtag.js) - Google Analytics