环境
Extjs 4.2.1
spring MVC 3.2.12
mybatis 3.2.8
效果图
jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% String path = request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
<link href="<%=path%>/static/ext-4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<script src="<%=path%>/static/ext-4.2.1/bootstrap.js"></script>
<script src="<%=path%>/static/ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
function init() {
Ext.MessageBox.alert("ExtJS", "Hello ExtJS");
}
//Ext.onReady(init);
Ext.onReady(function(){
var form = new Ext.form.Panel({
border: false,
fieldDefaults: {
labelWidth: 60
},
defaultType: 'textfield',
bodyPadding: 5,
items: [{
xtype: 'textfield',
fieldLabel: '用户名',
name: 'username',
value:'admin',
anchor:'100%' // anchor width by percentage
},{
xtype: 'textfield',
inputType: 'password',
fieldLabel: '密码',
name: 'password',
value:'123456',
anchor: '100%'
}]
});
new Ext.window.Window({
autoShow: true,
title: '登录',
width: 400,
height:200,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: true,
items: form,
buttons: [{
text: '登录',
handler: function() {
login();
}
},{
text: '重置',
handler: function() {
form.getForm().reset();
}
}]
});
function login(){
form.submit({
url : '<%=path%>/login.json',
method : 'POST',
success : function(form, action) {
var msg = action.result.msg;
if(msg == "success"){
location.href = "<%=path%>/";
} else {
Ext.Msg.alert('提示', msg);
}
},
failure : function(form, action) {
Ext.Msg.alert('提示', "登录请求失败！");
//var data = action.response.responseText;
}
});
}
});
</script>
</head>
<body>
</body>
</html>
LoginController
@RequestMapping(value = "/login", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
//@ResponseBody
public ModelMap loginPost(HttpServletRequest request, HttpServletResponse response, ModelMap model) {
//log.info("loginPost");
String username = request.getParameter("username");
String password = request.getParameter("password");
User user = userSerive.getByUserName(username);
if(user == null){
model.put("success", true);
model.put("msg","用户不存在！");
} else if(!user.getPassword().equals(MD5Util.encode(password+"{"+username+"}"))){
model.put("success", true);
model.put("msg","密码错误！");
} else {
//加载用户的角色
List<Role> roles = roleSerive.getListByUserId(user.getId());
user.setRoles(roles);
request.getSession(true).setAttribute("user", user);
super.setSession(request.getSession(false));
model.put("success", true);
model.put("msg","success");
}
return model;
}
相关推荐
本文将深入探讨如何基于Ext4.2版本实现一个简单的TreePanel demo，结合数据库进行后台的数据操作，包括增、删、改、查功能。这对于初学者来说是一个很好的起点，能够帮助理解如何将前端UI与后端数据服务相结合。 ...
总的来说，Ext JS 4.2.1.883是构建现代Web应用的强大工具，它集成了UI组件、Ajax通信、数据绑定、事件驱动、可扩展性和高性能等特点。对于希望快速开发功能丰富的Web应用的开发者来说，这是一个值得考虑的选择。通过...
"ext-4.2.1.883"是ExtJS的一个特定版本，其主要特性包括： 1. **组件化架构**：ExtJS的核心是它的组件系统，这使得开发者可以方便地组合和复用各种UI元素，如表格、面板、表单、树形视图等。每个组件都有自己的属性...
下面我们将深入解析ExtJS 4.2以及它与Java的集成方式，包括代码示例、关键概念和最佳实践。 ### ExtJS 4.2简介 ExtJS 4.2是一个成熟且功能丰富的前端框架，用于构建数据密集型的单页应用程序（SPA）。它提供了大量...
在ExtJS4端，登录表单的事件监听器会捕获提交事件，通过Ajax发送登录请求到服务器。这个请求可能包含JSON数据，如用户名和密码。当服务器返回响应时，前端可以根据响应内容更新UI，比如显示成功或失败消息，或者自动...
EXT4.2是EXT JavaScript库的一个版本，提供了大量的改进和新特性。例如，它强化了MVC架构，改进了数据包处理，增强了组件和布局系统，以及提供了更丰富的图表和图形功能。在EXT MVC中，我们可以通过API来创建、配置...
通过`Ext.data.Store`类，你可以配置数据源、代理（如Ajax或内存代理），并监听数据变化事件。 3. **视图（View）**：视图是用户界面的表示层，它可以是简单的HTML元素，也可以是复杂的组件结构。在ExtJS中，视图...
1.2 Ext Core的Ajax功能 19 1.3 DomQuery详解 20 1.4 模板介绍 23 1.5 实用功能 24 1.6 定时执行代码 25 1.7 本章小结 26 第2章 Ext Core实例系统设计 27 2.1 需求分析 27 2.2 系统设计 28 2.3 功能结构图 29 2.4 ...
7.2.5 使用ajax处理数据的代理：ext.data.proxy.ajax与ext.data.proxy.rest / 308 7.2.6 跨域处理数据的代理：ext.data.proxy.jsonp / 312 7.2.7 为ext.direct服务的代理：ext.data.proxy.direct / 312 7.2.8 ...
12.1.2 Ext.Ajax.request操作示例 12.1.3 Ext.Ajax.request提交XML数据 12.2 Ext.Updater基础 12.2.1 Ext.Updater.update方法 12.2.2 Ext.Updater.update操作示例 12.3 利用Ajax优化Web应用框架 12.3.1 多级...
文件`How-to-clear-session-if-user-presses-browsers-back.pdf`可能包含了更详细的解释和代码示例，指导如何在实际的Ext JS 4.2项目中实现这个功能。建议阅读该文档以获取更具体的实现步骤和技术细节。同时，对于...
在"ext-4.2.1.883"这个子目录中，包含了EXTJS 4.2.1的具体版本，包含了所有必要的文件和资源，供开发者下载使用。 总结来说，EXTJS 4.2.1商业版是构建高效、响应式和功能丰富的Web应用的理想选择，其强大的组件库、...
ExtJS 4.2 是一个流行的JavaScript框架，用于构建富客户端Web应用程序。MVC（Model-View-Controller）模式是其核心设计模式，它有助于分离应用程序的逻辑，提高可维护性和可扩展性。在ExtJS 4.2中实现左菜单的动态...
以下是一个简单的EXTJS4导出Excel的代码示例： ```javascript // 假设你已经有了一个名为grid的GridPanel实例，其store为store实例 var csvData = ''; store.each(function(record) { var fields = record.data; ...
12.1.2 Ext.Ajax.request操作示例 12.1.3 Ext.Ajax.request提交XML数据 12.2 Ext.Updater基础 12.2.1 Ext.Updater.update方法 12.2.2 Ext.Updater.update操作示例 12.3 利用Ajax优化Web应用框架 12.3.1 多级...
在提供的压缩包"ext-4.2.1.883"中，包含的是Ext JS的4.2.1.883版本，这是一个稳定且功能丰富的版本，适用于开发人员进行企业级应用的开发。 1. **组件系统**：Ext JS的核心是其组件模型，它允许开发者创建各种复杂...
下面是一个简单的 `Ext.toolbar.Toolbar` 示例： ```javascript new Ext.Toolbar({ items: [ '->', { xtype: 'tbtext', text: 'Toolbar Example' }, '-', { xtype: 'button', text: 'Button 1' }, ...
- **示例**: 使用 `Ext.Ajax.upload()` 方法上传文件。 #### 十一、分页与 ComboBox **11.1 分页** - **概念**: 将大量数据分成多页展示。 - **实现**: 使用 `Ext.PagingToolbar` 组件实现分页功能。 **11.2 ...
type: 'ajax', url: 'get-data.php', reader: { type: 'json', root: 'rows', totalProperty: 'total' } }, model: 'MyModel', // 假设已定义的Model pageSize: 25 }); var grid = new Ext.grid....