`
lingyibin
  • 浏览: 196410 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

Ext常用的知识点(一)--弹出消息

阅读更多

 

首先,要写Extjs,建议大家用一个工具spket。有eclipse版的,也有dreamweaver版的,本来想把安装包和破解包上传的,但太大,javaeye不让传。需要的同志直接找我要:lingyibin@gmail.com

1、alert

Ext.MessageBox.alert("测试","这是内容!",function(){alert("你点击了alert中的确定按钮!");});

2、comfirm

 

Ext.MessageBox.confirm("测试","这是内容!",function(e){alert(e);}); //这里e是点击的按钮上面的文字

3、promt

 

Ext.MessageBox.prompt("测试","这是内容!",
		function(e,text){
			alert(e+"-"+text); //e和上面一样,也是点击的按钮的名称,text是写入的数据
		},this,true); //this表示作用域,true表示多行

 4、定制的消息框

 

Ext.MessageBox.show({ 
	    title:"标题", 
	    msg:"内容的消息", 
	    buttons:{"ok":"ok按钮上的文字"},  //定义窗口上的按钮及按钮上的文字
	    fn:function(e){alert(e);}, //点击按钮时的事件
	    width:300, 
	    icon:Ext.MessageBox.INFO, 
	    closable:false, 
	    progress:true, 
	    wait:true, 
	    progressText:"进度条" ,
	    prompt:true ,
	    multiline:true 
	}); 
   
 Ext.MessageBox.show还有其它的一些参数:
1.animEl:对话框弹出和关闭时的动画效果,比如设置为“id1”,则从 id1 处弹
出并产生动画,收缩则相反 
2.buttons:弹出框按钮的设置,主要有以下几种:Ext.Msg.OK, 
                                        Ext.Msg.OKCANCEL, 
                                        Ext.Msg.CAMCEL, 
                                        Ext.Msg.YESNO, 
                                        Ext.Msg.YESNOCANCEL   你也可以自定义按钮上面的字:{"ok","我本来是 ok 的"}。 
   若设为 false,则不显示任何按钮. 
3.closable:如果为 false,则不显示右上角的小叉叉,默认为 true。 
4.msg:"消息的内容" 
5.title:"标题" 
6.fn:关闭弹出框后执行的函数 
7.icon:弹出框内容前面的图标,取值为 Ext.MessageBox.INFO, 
                                       Ext.MessageBox.ERROR, 
                                  Ext.MessageBox.WARNING, 
                                  Ext.MessageBox.QUESTION 
8.width:弹出框的宽度,不带单位 
9.prompt:设为 true,则弹出框带有输入框 
10.multiline:设为 true,则弹出框带有多行输入框 
11.progress:设为 true,显示进度条,(但是是死的) 
12.progressText:显示在进度条上的字 
13.wait:设为 true,动态显示 progress 
14.waitConfig:配置参数,以控制显示 progress
 

5、下面实现一个弹出进度条

 

				Ext.MessageBox.show({
					title : "标题",
					msg : "内容的消息",
					buttons : {}, // 窗口上没有按钮
					width : 300,
					icon : Ext.MessageBox.INFO,
					closable : false,
					progress : true
				});

				var f = function(v) {
					return function() {
						if (v == 12) {
							Ext.MessageBox.hide();
							// alert("加载完成!");
						} 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);// 从点击时就开始计时,所以 500*i表示每 500ms							// 就执行一次
				}
   

还有另一种写法,设置一个时间,时间一到就用程序隐藏进度条。

 

	             Ext.MessageBox.show({ 
	                 title:"时间进度条", 
	                 msg:"5s 后关闭进度框", 
	                 progress:true, 
	                 width:300, 
	                 wait:true,                  
	                 waitConfig:{interval:600},//0.6s 进度条自动加载一定长度 
	                 closable:false
	             }); 
	             setTimeout(function(){Ext.MessageBox.hide()},5000);//5	后执行关闭窗口的函数

 还可以简化:

 

	         Ext.MessageBox.show({
	         	title:"时间进度条",
	                msg:"5s 后关闭进度框", 
	         	progress:true,
	         	width:300,
	         	wait:true,
	         	closable:false,
	         	waitConfig:{ //这里,程序会在duration的时间后执行fn里面的函数,我们利用这一点来关闭进度条
	         		duration:5000,
	         		interval:600,
	         		fn:function(){
	         			Ext.MessageBox.hide()
	         		}
	         	}
	         });
  • 大小: 6.2 KB
  • 大小: 7.2 KB
0
11
分享到:
评论

相关推荐

    EXT学习札记--京华志

    下面是一个简单的示例代码,演示如何在页面加载完成后弹出一个消息框: ```html Ext.onReady(function(){ Ext.Msg.alert('系统提示', '已经成功!'); }); ``` 通过以上代码,当页面加载完成时会弹出一个提示框,...

    封装一个Ext消息提示框,显示几秒后自动消失

    本资源是关于封装一个 Ext 消息提示框,显示几秒后自动消失的知识点集合。该资源主要涵盖了 CSS 和 JavaScript 代码,旨在实现一个可以自动消失的消息提示框。 1. CSS 代码分析 在 CSS 代码中,我们可以看到一些...

    ext入门必学

    通过以上知识点的详细讲解,我们对Ext框架有了更深入的理解,从起源、特点、下载配置到实际编码实践,每一个环节都至关重要。掌握这些基础知识,是进入Ext开发世界的敲门砖,也是构建高质量Web应用的基石。

    Ext3.2中文API(2010-10-18更新).rar

    在Ext3.2中,一些关键知识点包括: 1. **组件(Components)**:Ext库的核心是各种组件,如面板(Panel)、表格(Grid)、窗口(Window)等。每个组件都有自己的配置项和方法,可以定制外观和行为。 2. **布局管理...

    深入浅出Ext JS (含源代码非完整版)

    紧接着对Ext JS的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后一个完整的EXT应用结束全书。每个知识点都配有相应的示例,可操作...

    新版ext教程.pdf

    ### 新版ext教程知识点概述 根据提供的文件信息,“新版ext教程.pdf”被描述为一个非常优秀的教程资源,其内容详实、易于理解且全面。该文档主要围绕ext框架进行讲解,适合初学者以及有一定基础的开发者参考学习。...

    Ext原理.txt

    **Ext.MessageBox** 是 Ext 框架中的一个重要组成部分,主要用于弹出对话框,显示消息或请求用户输入信息。它支持三种类型的对话框:警告(alert)、确认(confirm)和提示(prompt)。下面将详细介绍这三个方法的...

    Gwt-ext学习笔记

    ### Gwt-ext学习笔记知识点详解 #### 一、GWT与Gwt-ext简介 - **GWT (Google Web Toolkit)**:是由Google开发的一款用于构建高度交互式的Web前端应用的开发框架,它允许开发者使用Java语言编写客户端代码,并通过...

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

    ### Ext教程知识点详解 #### 1. Ext实例 Ext教程主要介绍了Ext JS的多个实例,涵盖了从基础的表格控件到复杂交互的弹出窗口。Ext JS是基于JavaScript的框架,广泛用于开发富互联网应用程序(RIA),支持多种浏览器...

    Ext教程_javakc

    例如,以下代码展示了如何在页面加载完成后弹出一个消息框: ```html &lt;link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/&gt; &lt;script type="text/javascript" src="extjs/adapter/ext/...

    Ext JS下载及配置

    下面是一个简单的 Ext JS 应用示例,用于展示如何创建一个弹出消息框: ```html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; ...

    Ext-JS框架中文文档

    ### Ext-JS框架中文文档知识点概览 #### 一、ExtJS框架简介 **ExtJS** 是一个基于JavaScript的开源框架,它提供了丰富的UI组件库和强大的数据处理能力,非常适合用于构建复杂的Web应用程序。该框架最初由Sencha...

    ext培训第二讲.doc

    ### EXT培训第二讲知识点 #### 一、EXT简介与环境搭建 **1.1 新建Web工程** 在开始EXT的学习之前,首先需要搭建一个基本的Web开发环境。本章节主要介绍如何创建一个Web项目,并配置必要的EXT资源文件。 **步骤...

    EXT-desktop+struts2

    下面将详细介绍这两个技术及其结合使用的关键知识点: 1. **Struts2**:Struts2 是 Apache 软件基金会的开源项目,它继承了 Struts1 的优点并解决了其存在的问题。Struts2 提供了一种基于拦截器的 MVC 模式,使得...

    Extjs学习—总结的extjs的一些常用小知识点

    ### Extjs 学习——总结的一些常用知识点 #### 一、概述 Extjs 是一个用于构建 Web 应用程序的强大框架,它提供了大量的 UI 组件和功能,可以帮助开发者快速搭建出高质量的应用界面。本文将根据一个月的学习经验,...

    ext-3.0.0开发包

    在EXT 3.0.0中,主要包含以下核心知识点: 1. **组件系统**:EXT的核心是其组件化设计,允许开发者创建各种复杂的UI元素,如表格、表单、树形视图、面板、菜单等。这些组件可以灵活组合,形成复杂的应用结构。 2. ...

    Ext.Net 1.3 Source code

    8. **工具提示与弹出窗口**:Ext.Net提供了丰富的提示和弹出窗口组件,如Tip、Window和MessageBox,方便展示额外信息或进行用户确认操作。 9. **性能优化**:通过压缩、合并脚本和CSS,以及延迟加载等技术,Ext.Net...

    Ext Htmleditor 支持上传图片

    本文将深入讲解如何利用Ext HTMLEditor实现图片上传功能,以及相关知识点。 1. Ext JS 库介绍 Ext JS 是一个用于构建桌面Web应用的JavaScript框架,它提供了丰富的UI组件和数据管理功能。它使用MVC(Model-View-...

    深入浅出Ext.JS (6)

    全书由一个可以引领读者快速入门的“hello world”示例开篇,紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后以一...

Global site tag (gtag.js) - Google Analytics