`
kgdso
  • 浏览: 87921 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

记录:extjs4.0学习1

 
阅读更多

进行测试的jsp文件:

<%@ page language="java" contentType="text/html; charset=gb2312"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>ExtJS的MessageBox测试</title>
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/script/ext4.0/resources/css/ext-all.css" />
	<script type = "text/javascript"  src="<%=request.getContextPath()%>/script/ext4.0/ext-all.js" ></script>
	<script type = "text/javascript"  src="<%=request.getContextPath()%>/script/ext4.0/local/ext-lang-zh_CN.js" > </script>
	<!-- Ext的MessageBox和Msg都是指向Ext.window.MessageBox. 这些都不是阻塞的。 -->
	<script language="javascript">
		Ext.onReady(function(){
			Ext.Msg.msgButtons[0].setText("好");//OK
			Ext.Msg.msgButtons[1].setText("是");//YES
			Ext.Msg.msgButtons[2].setText("否");//NO
			Ext.Msg.msgButtons[3].setText("取消");//CANCEL
			
			
			Ext.MessageBox.alert("alert提示框",'<font color=red>支持html格式文本',callBackForAlert);
		});

		function callBackForAlert(id){
			alert("alert信息框的call back, id="+id);
			Ext.MessageBox.confirm("confirm提示框","测试",callBackForConfirm);
		}
		
		function callBackForConfirm(id){
			alert("confirm提示框所选id是:"+id);
			Ext.MessageBox.prompt("prompt提示框",'请输入提示',callBackForPrompt,this,true,'默认值');
		}

		function callBackForPrompt(id,msg){
			alert("你的选择是:"+id+", 你的输入是:"+msg);

			alert("以下是自定义提示框:");

			Ext.Msg.show({
				title:'自定义提示',
				msg:'提示的内容',
				width:300,
				height:300,
				modal:true,
				prompt:true,
				multiline:true,
				value:'请输入',
				buttons:Ext.Msg.OKCANCEL,
				fn:callBackForShow,
				icon:Ext.Msg.QUESTION
				
			});
		}
		var msgbox;
		function callBackForShow(id,msg){
			alert("你的选择是:"+id+", 你的输入是:"+msg);

			msgbox = Ext.Msg.alert("时钟","开始", callBackForThreadStop);
			task ={
					run:function(){
					//以下用来更新MessageBox的显示内容
						msgbox.updateText("当前时间:"+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
					},
					interval:1000
				};
			Ext.TaskManager.start(task);//启动定时任务
		}
		//这个是Ext的定时任务线程
		var task;

		//用来停止线程
		var count = 0;//刷新次数
		var percentage = 0;//百分比
		function callBackForThreadStop(){
			Ext.TaskManager.stop(task);

			//以下测试进度条窗口
			//Ext.Msg.wait("进度","进度条窗口"); 这个默认没有modal功能
			msgbox=Ext.Msg.show({
				title:'进度条',
				msg:'正在解压。。。',
				width:300,
				height:300,
				modal:true,
				progress:true,
				closable:false,
				buttons:Ext.Msg.CANCEL,
				fn:cancelProgress
			});
			task ={
					run:function(){
						count++;
						percentage = count/10;
						progressText = "进度:"+percentage*100+"%";
						msgbox.updateProgress(percentage,progressText,"当前时间:"+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));

						if(count>=10){
							Ext.TaskManager.stop(task);
							msgbox.hide();
							alert("任务完成!");
							
						}
					},
					interval:1000
				};
			Ext.TaskManager.start(task);//启动定时任务
		}

		function cancelProgress(id){
			if(id=='cancel'){
				Ext.TaskManager.stop(task);
				msgbox.hide();
				alert("任务取消!");
			}else{
				alert(id);
			}
		}
		
	</script>
</head>
<body>
	<h1>ExtJS的MessageBox测试</h1>
	
</body>
</html>

 

分享到:
评论

相关推荐

    (Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip

    【标题】:“(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip”指的是一个基于Java和JSP技术,并利用Extjs4.0框架开发的可扩展的后台管理系统源码。这个项目是针对中大型企业的需求设计的,提供...

    ExtJS4.0 MVC 学习资料集合

    三、《Extjs4.0学习指南(中文).docx》 这是一份全面的学习指南,系统地介绍了ExtJS4.0的基础概念和API。从基础的组件使用,如按钮、表格、面板,到高级特性,如数据网格、图表、树形结构,都有深入的讲解。同时,该...

    extjs4.0 MVC 示例代码

    EXTJS 4.0 是一个强大的JavaScript框架,用于构建富客户端Web应用程序。...通过分析这些文件,我们可以学习如何在实际项目中实施EXTJS 4.0的MVC模式,理解其工作原理,并掌握如何组织和构建一个EXTJS应用程序。

    ssh框架+extjs4.0grid实例

    开发者可以通过此项目学习到如何使用Struts2 Action返回JSON数据,ExtJS Grid如何解析并显示这些数据,以及Spring如何管理整个应用的生命周期。这样的组合既提供了强大的后台处理能力,也具备优秀的用户体验,是现代...

    extjs4.0文档

    Ext JS 4.0的文档详细记录了每个组件和类的用法,适合不同水平的开发者。官方也提供了一些教程来帮助新手快速入门。 8. **事件管理** Ext JS 4.0拥有自己的事件管理器,允许开发者通过声明的方式来处理事件,而非...

    Extjs4.0+java的一个后台管理项目

    【标题】"Extjs4.0+java的一个后台管理项目" 涉及的主要知识点包括前端框架ExtJS 4.0、后端开发语言Java以及数据库管理系统SQL Server,特别是日志管理功能的实现。 **ExtJS 4.0** 是Sencha公司推出的一款基于...

    extjs4.0图书馆管理子系统

    【标题】"extjs4.0图书馆管理子系统"是一个基于Web的应用程序,它利用了先进的前端技术EXTJS4.0来构建用户界面,提供高效、直观的图书管理功能。EXTJS是一个强大的JavaScript库,专为创建桌面级的富互联网应用程序...

    extjs4中文视频下载地址

    ### ExtJS 4.0 技术中文视频知识点解析 ...这些视频涵盖了 ExtJS 4.0 的各个方面,从基础概念到高级功能均有涉及,适合不同程度的学习者观看。希望这些知识点能帮助大家更好地理解和掌握 ExtJS 4.0 的使用技巧。

    Extjs4.0+struts2简单MVC 实例demo

    总之,"Extjs4.0+struts2简单MVC 实例demo"是一个很好的学习资源,涵盖了两种关键技术的整合和MVC模式的应用,对于提升Java Web开发技能非常有帮助。通过深入研究这个示例,开发者可以更好地掌握Web应用的开发流程,...

    javassm源码Extjs4.0通用后台管理系统源码

    根据提供的文件信息,本文将对“javassm源码Extjs4.0通用后台管理系统源码”进行深入解析,重点围绕其技术特点、应用场景及扩展性等方面展开。 ### javassm框架简介 #### JavaSSM JavaSSM是指基于Java语言开发的...

    extjs4.0 grid

    ExtJS 是一个强大的JavaScript 库,专用于构建富客户端Web应用程序。...学习和理解这些示例,将有助于提升你使用ExtJS开发富客户端应用的能力。如果你正在使用或计划使用ExtJS,那么深入研究这些功能是非常有价值的。

    ExtJS-4.0.7 + Spket 1.6.22

    其中,`jsb3`文件是一种特定格式的文件,通常用于记录和管理ExtJS项目的类依赖关系,帮助开发者更好地理解和组织代码结构。 Spket是一款强大的JavaScript集成开发环境(IDE),专为JavaScript、Ajax和MVC框架如...

    ext4.0图书管理系统源码

    通过这个【标题】和【描述】,我们可以学习到如何利用SSH框架进行后端开发,以及EXTJS 4.0进行前端UI设计。对于想深入理解这些技术或需要开发类似系统的开发者来说,这是一个宝贵的实践资源。【标签】"ext例子"表明...

    假期管理ext4.0项目(extjs4+ssh+mysql)

    《假期管理ext4.0项目:整合EXTJS4、SSH与MySQL的实践探索》 本文将深入探讨一个基于EXTJS4、SSH(Spring、Struts2、Hibernate)和MySQL数据库的假期管理系统,该项目旨在为小型企业提供高效且易用的假期管理解决...

    基于ASP.NET4.0、ExtJs技术构建酒店管理系统

    这个项目提供的源代码(第18讲源代码)可能涵盖部分或全部上述模块,为学习者提供了一次实际操作的机会,了解如何将ASP.NET和ExtJS技术结合应用于实际项目。通过深入研究这些代码,开发者可以提升在.NET和JavaScript...

    ext4.0中文文档

    EXTJS文档则是关于EXT JavaScript库的相关资料,它是一个用于构建桌面级Web应用的富客户端框架,与EXT4文件系统本身并无直接关联,但可能在构建基于EXT4的管理界面时有所帮助。 总之,EXT4.0中文文档是理解、管理和...

    extjs4.2 导出至excel (新测可用,修改引用指向)

    原始代码可能是基于EXTJS 4.0版本的,作者通过个人的努力使其兼容了4.2版本,并且还提供了一个修改引用地址的示例,这对于那些需要在不同环境中部署应用的开发者来说是非常有价值的。 在EXTJS中实现数据导出到Excel...

    EXT2.0,EXT4.0,JS

    EXT2.0主要改进了EXT1的缺陷,如提高了速度、增加了日志记录功能,并且支持大文件和大硬盘。它没有日志功能,这意味着在系统崩溃或电源故障后,文件系统的完整性可能会受到影响。尽管EXT2.0已经被更先进的EXT3和EXT4...

    基于SSM框架的物流配送管理系统设计与实现.pdf

    结合Extjs4.0作为客户端界面,能够创建丰富的用户体验和交互效果。 该系统设计包括六个主要功能模块:用户系统管理、客服中心管理、配送管理、库房管理、调度管理和车辆信息管理。用户系统管理模块涉及用户注册、...

Global site tag (gtag.js) - Google Analytics