转载:http://blog.csdn.net/wayfoon322
Ext登陆窗口代码，关键代码位于 login.js 中
html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>wayfoon</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();
});
分享到：
相关推荐
在EXT 2.0的压缩包文件"ext-2.0"中，可能包含了EXT库的JavaScript文件、CSS样式文件、图像资源以及示例代码等，开发者可以通过这些资源学习EXT 2.0的使用方法，快速上手并创建自己的富互联网应用。通过深入理解和...
EXT 2.0是EXT库的一个早期版本，它包含了一系列用于构建用户界面的组件和工具，如表格、面板、菜单、窗口等。EXT 2.0项目源代码的分享为开发者提供了一个深入了解EXT框架内部工作原理和最佳实践的机会。 在EXT 2.0...
Ext 2.0是Sencha公司开发的一个JavaScript库，主要用于构建富互联网应用程序（RIA）。这个中文文档包含了关于Ext 2.0的详细说明，对于开发者来说是一个非常宝贵的资源，可以帮助他们理解和使用这个强大的前端框架。 ...
Ext 2.0是一个强大的JavaScript库，专门用于构建富客户端应用程序。它是一个基于Ajax技术的开发框架，Ajax...在压缩包文件"ext2"中，可能包含了Ext 2.0的源代码、示例、文档和其他相关资源，供开发者学习和使用。
1. **组件系统**：EXT 2.0拥有一个强大的组件模型，包括窗口（Window）、表格（Grid）、面板（Panel）、按钮（Button）等。这些组件可以方便地组合和嵌套，实现复杂界面布局。 2. **数据绑定**：EXT 2.0支持数据...
"Demos_Ext2.0.rar"可能包含了EXT2.0的官方示例代码，这些示例通常涵盖了框架的各个功能模块，包括基本组件的使用、数据绑定、Ajax通信、布局管理、拖放操作以及各种高级功能的演示。通过学习和研究这些示例，开发者...
2. **数据绑定**：EXT2.0引入了数据绑定的概念，使得视图与模型之间的数据同步变得简单，减少了代码量，提高了代码的可维护性。 3. **强大的布局系统**：EXT2.0拥有多种布局管理器，如fit布局、border布局、form...
1. **组件系统**：EXT2.0拥有强大的组件体系，包括窗口（Window）、面板（Panel）、表格（Grid）、表单（Form）、树形控件（Tree）等。每个组件都有其特定的属性、配置选项、事件和方法，这些在API文档中都有详细的...
1. **组件化设计**：EXT2.0提供了一套完整的组件系统，包括表格、面板、表单、树形视图、菜单、窗口等，这些组件可以组合起来构建复杂的用户界面。 2. **数据绑定**：EXT2.0支持数据绑定，允许将视图组件与数据模型...
总而言之，EXT2.0帮助文档CHM版是一个全面且实用的资源，对于那些致力于使用EXT开发Web应用程序的人来说，它是提高效率、优化代码的重要参考资料。无论你是新手还是经验丰富的EXT开发者，这个文档都会成为你的得力...
EXT2.0是一款基于JavaScript的富客户端框架，用于构建现代Web应用程序。它提供了一系列强大的组件，包括数据网格、表格、窗口、菜单等，使得开发者能够创建功能丰富的、交互性强的用户界面。在"EXT2.0 带无限极树的 ...
EXT手册.CHM是EXT2.0的官方文档，它包含了详尽的API参考、示例代码以及教程，是学习和掌握EXT2.0的关键资源。CHM文件是Microsoft编写的帮助文件格式，通常用于存放技术文档和教程，方便离线查阅。 EXT js的组件系统...
这样的资源通常会涵盖EXT2.0的基本组件，如表格（Grid）、面板（Panel）、窗口（Window）、菜单（Menu）等，以及布局管理、数据绑定、事件处理等方面的知识。 ExtJS学习.pdf则可能是另一个EXT JS的学习资料，可能...
EXT2.0的核心是它的组件模型，它提供了一系列丰富的用户界面组件，如表格、面板、窗口、菜单等，使得开发者可以轻松地创建交互式和富用户体验的网页应用。 EXT2.0入门教程主要会涵盖以下几个关键知识点： 1. **EXT...
EXT2.0-API.chm文件是一个CHM（Microsoft HTML Help）格式的文档，通常包含详细的类参考、示例代码和教程。通过这个文档，开发者可以查找特定类的详细信息，包括类的构造函数、方法、属性、配置项和事件。例如，你...
1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果？ 1.5. 为什么自己按照例子写的代码，显示出来总找不到图片 1.6. 我们还需要什么？ 1.7. 入门之前，都看helloworld。 1.7.1. 直接使用下载...
EXT2.0是EXT框架的一次重大更新，它带来了许多改进和新功能，旨在提高开发者的体验和应用程序的性能。以下是对EXT2.0中关键知识点的详细解释： 1. **组件模型 (Component Model)**: 在EXT2.0中，Component和...
EXT2.0和EXT2.3是EXT库的两个重要版本，提供了丰富的用户界面组件和强大的数据管理功能。这篇教程旨在帮助新手快速掌握EXT的使用，从而在Web开发中实现更加交互性强、功能完善的页面。 EXT2.0是一个重要的里程碑，...