`

Ext2.0:Ext登陆窗口代码

阅读更多

Ext登陆窗口代码,关键代码位于 login.js 中

html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<title>样例</title>

		<meta http-equiv="pragma" content="no-cache">

		<meta http-equiv="cache-control" content="no-cache">

		<meta http-equiv="expires" content="0">

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

		<link rel="stylesheet" type="text/css"

			href="../ext/resources/css/ext-all.css">

		<script type="text/javascript" src="../ext/ext-base.js"></script>

		<script type="text/javascript" src="../ext/ext-all.js"></script>

		<SCRIPT type="text/javascript" src="../js/login.js"></SCRIPT>

		<link rel="stylesheet" type="text/css" href="../ext/resources/css/xtheme-slate.css" />

		<SCRIPT type="text/javascript" src="../ext/ext-lang-zh_CN.js"></SCRIPT>

		<script type="text/javascript">

		Ext.onReady(function()

		{

			Ext.MessageBox.alert('haha','o(∩_∩)o...哈哈');

		})

		</script>

	</head>



	<body>

	</body>

</html>
login.js 代码:
 
Ext.onReady(function(){

	//开启表单提示

	Ext.QuickTips.init();

	//设置提示信息位置为边上

	Ext.form.Field.prototype.msgTarget = 'side';

	var win = new Ext.Window({

		id:'login-win',

		title:'登陆',

		iconCls:'tabs',

		width:300,

		height:120,

		collapsible: true,

		plain: true,

		//初始化表单面板

		items:new Ext.form.FormPanel({

			id:'login-form',

			labelWidth:50, // 默认标签宽度板

			labelAlign:'right',

			buttonAlign:'center',

			//不设置该值,表单将保持原样,设置后表单与窗体完全融合

			baseCls:'header',

			layout:'form',

			defaults:{

				width:200

			},

			//默认字段类型

			defaultType:'textfield',

			items:[{

				id:'username',

				fieldLabel:'账号',

				allowBlank:false//禁止为空

			},{

				id:'password',

				inputType:'password',

				fieldLabel:'密码',

				allowBlank:false

			}],

			//初始化按钮

			buttons:[{

				text:'登陆',

				type:'submit',

				handler:function(){

					var but=this;

					but.setDisabled(true);

					this.setText('正在登陆');

					//将表单提交

					Ext.getCmp('login-form').getForm().submit({

						url:'/XXX/login.action',

						method:"POST",

						success:function(form,action){

							document.location='/XXX/main.jsp';

						},

						failure:function(){

							but.setText("登陆");

							but.setDisabled(false);

						}

					});

				}

			}]

		})

	});

	//将窗口显示出来

	win.show();

});
分享到:
评论
1 楼 astronomy 2008-08-28  
不错,挺清晰,就是个人感觉不够简捷

相关推荐

    ext2.0(jsp标签)

    在EXT 2.0的压缩包文件"ext-2.0"中,可能包含了EXT库的JavaScript文件、CSS样式文件、图像资源以及示例代码等,开发者可以通过这些资源学习EXT 2.0的使用方法,快速上手并创建自己的富互联网应用。通过深入理解和...

    ext2.0项目源代码供大家学习ext使用

    EXT 2.0是EXT库的一个早期版本,它包含了一系列用于构建用户界面的组件和工具,如表格、面板、菜单、窗口等。EXT 2.0项目源代码的分享为开发者提供了一个深入了解EXT框架内部工作原理和最佳实践的机会。 在EXT 2.0...

    Ext2.0中文文档

    Ext 2.0是Sencha公司开发的一个JavaScript库,主要用于构建富互联网应用程序(RIA)。这个中文文档包含了关于Ext 2.0的详细说明,对于开发者来说是一个非常宝贵的资源,可以帮助他们理解和使用这个强大的前端框架。 ...

    ext 2.0

    Ext 2.0是一个强大的JavaScript库,专门用于构建富客户端应用程序。它是一个基于Ajax技术的开发框架,Ajax...在压缩包文件"ext2"中,可能包含了Ext 2.0的源代码、示例、文档和其他相关资源,供开发者学习和使用。

    ext 2.0 源码 下载

    1. **组件系统**:EXT 2.0拥有一个强大的组件模型,包括窗口(Window)、表格(Grid)、面板(Panel)、按钮(Button)等。这些组件可以方便地组合和嵌套,实现复杂界面布局。 2. **数据绑定**:EXT 2.0支持数据...

    ext2.0 详解和API

    "Demos_Ext2.0.rar"可能包含了EXT2.0的官方示例代码,这些示例通常涵盖了框架的各个功能模块,包括基本组件的使用、数据绑定、Ajax通信、布局管理、拖放操作以及各种高级功能的演示。通过学习和研究这些示例,开发者...

    ext2.0中文帮助文档

    2. **数据绑定**:EXT2.0引入了数据绑定的概念,使得视图与模型之间的数据同步变得简单,减少了代码量,提高了代码的可维护性。 3. **强大的布局系统**:EXT2.0拥有多种布局管理器,如fit布局、border布局、form...

    EXT2.0中文API

    1. **组件系统**:EXT2.0拥有强大的组件体系,包括窗口(Window)、面板(Panel)、表格(Grid)、表单(Form)、树形控件(Tree)等。每个组件都有其特定的属性、配置选项、事件和方法,这些在API文档中都有详细的...

    ext2.0原始js

    1. **组件化设计**:EXT2.0提供了一套完整的组件系统,包括表格、面板、表单、树形视图、菜单、窗口等,这些组件可以组合起来构建复杂的用户界面。 2. **数据绑定**:EXT2.0支持数据绑定,允许将视图组件与数据模型...

    EXT2.0帮助文档CHM版

    总而言之,EXT2.0帮助文档CHM版是一个全面且实用的资源,对于那些致力于使用EXT开发Web应用程序的人来说,它是提高效率、优化代码的重要参考资料。无论你是新手还是经验丰富的EXT开发者,这个文档都会成为你的得力...

    EXT2.0 带无限极树的 增删改差 是用jsp+servlet+ext2.0实现的

    EXT2.0是一款基于JavaScript的富客户端框架,用于构建现代Web应用程序。它提供了一系列强大的组件,包括数据网格、表格、窗口、菜单等,使得开发者能够创建功能丰富的、交互性强的用户界面。在"EXT2.0 带无限极树的 ...

    EXT2.0简明教程

    EXT手册.CHM是EXT2.0的官方文档,它包含了详尽的API参考、示例代码以及教程,是学习和掌握EXT2.0的关键资源。CHM文件是Microsoft编写的帮助文件格式,通常用于存放技术文档和教程,方便离线查阅。 EXT js的组件系统...

    EXT2.0学习资料.rar

    这样的资源通常会涵盖EXT2.0的基本组件,如表格(Grid)、面板(Panel)、窗口(Window)、菜单(Menu)等,以及布局管理、数据绑定、事件处理等方面的知识。 ExtJS学习.pdf则可能是另一个EXT JS的学习资料,可能...

    ext2.0入门教程

    EXT2.0的核心是它的组件模型,它提供了一系列丰富的用户界面组件,如表格、面板、窗口、菜单等,使得开发者可以轻松地创建交互式和富用户体验的网页应用。 EXT2.0入门教程主要会涵盖以下几个关键知识点: 1. **EXT...

    EXT2.0-API

    EXT2.0-API.chm文件是一个CHM(Microsoft HTML Help)格式的文档,通常包含详细的类参考、示例代码和教程。通过这个文档,开发者可以查找特定类的详细信息,包括类的构造函数、方法、属性、配置项和事件。例如,你...

    EXT2.0中文教程

    1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么? 1.7. 入门之前,都看helloworld。 1.7.1. 直接使用下载...

    Ext2.0 概述.doc

    EXT2.0是EXT框架的一次重大更新,它带来了许多改进和新功能,旨在提高开发者的体验和应用程序的性能。以下是对EXT2.0中关键知识点的详细解释: 1. **组件模型 (Component Model)**: 在EXT2.0中,Component和...

    EXT2.3+EXT2.0教程

    EXT2.0和EXT2.3是EXT库的两个重要版本,提供了丰富的用户界面组件和强大的数据管理功能。这篇教程旨在帮助新手快速掌握EXT的使用,从而在Web开发中实现更加交互性强、功能完善的页面。 EXT2.0是一个重要的里程碑,...

Global site tag (gtag.js) - Google Analytics