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();
});
分享到：
相关推荐
使用extjs做的一个分割窗体的例子，入门型的，
ext extjs 登陆
EXTJS3.0登录DEMO是一个基于EXTJS框架的示例项目，展示了如何将EXTJS与STRUTS2、SPRING和IBATIS等流行Java技术整合，构建一个完整的Web应用程序。EXTJS是一个用于创建富客户端界面的JavaScript库，而STRUTS2、SPRING...
在IT领域，特别是Web开发中，使用ExtJS框架进行用户登录界面的前端验证是一个常见的需求。根据提供的文件信息，我们可以详细解析如何利用ExtJS来实现这一功能。 ### ExtJS实现登录验证 #### 核心概念与流程 1. **...
extjs—登陆小例子
只要将解压的文件直接放置到myeclipse的webroot下面，启动tomcat访问。简单的EXTJS mvc框架，设计 store，model，controller,view,window等等，同时展示了一些基本的点击显示、修改等等操作，需要的同学自行下载
在“C# Extjs 登陆框、框架”这个主题中，我们主要关注的是如何使用ExtJS创建一个登录界面，并结合C#后端实现用户验证。登录框是任何应用程序的基础元素，它通常包含用户名和密码字段，以及登录和取消按钮。在ExtJS...
extjs4是权限 网络分享资料中修改而来。 extjs4+ spring3 + hibernate3.3+ struts2.1.8 + mysql5.04+ xp + myEclipse 8.5 测试通过 。 extjsdemo.rar
extjs2.0 使用简明教程之窗口分组，实现分组窗体
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码，主要是因为 ExtJS4 配备了一类新的系统，不向后兼容。在 ExtJS 3 里生成表的几个框架组件，ExtJS4 大多生成 div，这使得 CSS classes 将会失败...
在这个“EXTJS简单分页例子”中，我们将深入探讨EXTJS如何实现分页功能，以及如何与后台进行交互。 分页是Web应用中常见的数据展示方式，尤其在处理大量数据时，它可以提高页面加载速度并提供良好的用户体验。EXTJS...
ExtJS是一种基于JavaScript的开源富客户端框架，专为构建企业级Web应用程序而设计。它提供了丰富的组件库，包括数据绑定，强大的布局管理，以及高度可定制的用户界面元素。这个压缩包包含了一系列关于ExtJS的学习...
EXTJS 提供了简单易用的API来创建和管理右键菜单，可以轻松地将其与任何组件关联，如表格、树形视图等。这为用户提供了更直观的交互方式，提升了应用的易用性。 在EXTJS 3.0 中，网格（Grid）组件也是不可或缺的一...
《Extjs简单版酒店管理系统详解》 ExtJS是一款强大的JavaScript框架，用于构建富客户端Web应用程序。它提供了丰富的组件库和灵活的布局管理，使得开发者能够快速构建出功能丰富的交互式界面。本文将深入探讨如何...
ExtJS图标大全是一个集合了多种图标的资源库，特别适合用于Web开发，尤其是使用ExtJS框架构建用户界面时。ExtJS是一款强大的JavaScript UI框架，它提供了丰富的组件和工具，帮助开发者构建功能丰富的、响应式的Web...
ExtJS的事件系统使得绑定和处理这些事件变得简单。 7. **可视化编辑**：为了提高用户体验，设计器通常会提供撤销/重做、选择、复制/粘贴等可视化编辑功能。这些可以通过ExtJS的命令模式和组件方法实现。 8. **验证...
EXTJS是一种基于JavaScript的前端开发框架，用于构建富互联网应用程序（RIA）。EXTJS的应用主要体现在其强大的组件模型、丰富的用户界面以及高效的数据显示上。EXTJS提供了大量的预定义组件，如表格、面板、菜单、...
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
EXTJS + SSH 构建的登录系统是一种常见的前端与后端结合的应用开发方式。EXTJS 是一个基于 JavaScript 的富客户端框架，它提供了丰富的组件库，用于构建用户界面，特别是企业级应用。SSH 框架则由 Spring、Struts 和...
在“extjs + asp.net简单示例”中，我们将看到EXTJS如何与微软的asp.net后端技术结合，共同完成一个Web应用。 在ASP.NET中，开发者通常使用C#或VB.NET编写服务器端代码，处理数据、业务逻辑以及与数据库的交互。而...