思路
做一个简单的表单程序，用户登录。
目标，成功提交用户的信息，
struts2部分采用json插件。采用struts2.18的版本就可以不用额外下载json插件了.strus2.18自带了
struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.enable.DynamicMethodInvocation" value="true" />
<constant name="struts.devMode" value="false" />
<constant name="struts.convention.result.path" value="/contents/"/>
<constant name="struts.custom.i18n.resources" value="messageResource" />
<!--
<package name="default" namespace="/" extends="convention-default">
<default-action-ref name="index" />
<action name="index">
<result type="redirectAction">
<param name="actionName">HelloWorld</param>
<param name="namespace">/example</param>
</result>
</action>
</package> -->
<!-- Add packages here -->
<package name="json" namespace="/" extends="json-default">
<action name="login" class="cn.ibeans.demo.web.action.LoginAction">
<result type="json"/>
</action>
<!--
<action name="message_*"
class="cn.ibeans.web.action.MessageAction"
method="{1}">
</action>-->
</package>
</struts>
login.html:
<html>
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="contents/js/login.js"></script>
</head>
<body>
<div id="loginpanel"></div>
</body>
</html>
login.js:
var login = function(){
Ext.QuickTips.init();
Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// 实现具体的功能
var form = new Ext.form.FormPanel({
//title:'请登录',
defaultType:'textfield',
region:'center',
labelAlign:'right',
url:'login!login.action',
items:[{
fieldLabel:'用户',
name:'username'
},{
inputType:'password',
fieldLabel:'密码',
name:'password'
}],
buttons:[{
text : '登陆',
handler : function() {
form.getForm().submit( {
//url : 'login!login.action',
waitMsg : '正在提交，请稍等...',
success : function(form, action){
Ext.MessageBox.alert("info",action.result.username);
// window.location.href = a.result.url;
}
});
}
}, {
text : '取消',
handler : function() {
form.getForm().reset();
}
}]
});
var panel = new Ext.Panel( {
renderTo : 'loginpanel',
layout : "border",
width : 525,
height : 290,
defaults : {
border : false
},
items : [ {
region : "north",
height : 56,
html : 'north..................................'
}, {
region : "south",
height : 56,
html : 'south..................................'
}, {
region : "west",
width : 253,
html : 'west'
},form]
});
Ext.get('loginpanel').setStyle('position', 'absolute').center(Ext.getBody());
};
Ext.onReady(login);
这里开始有一点没弄通，就是button提交后的success:function(form,action){...}
后台成功处理了，但这里什么了执行不了。继续学习中...
终于弄明白了：一定要在action里有一个boolean类型的名为success的属性才行。
LoginAction.java:
public class LoginAction extends ActionSupport {
private static Logger log= Logger.getLogger(LoginAction.class);
private String username;
private String password;
private boolean success;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String login(){
this.setSuccess(true);
log.info("login method is called."+username+":"+password);
return super.SUCCESS;
}
}
分享到：
相关推荐
《ExtJS Web应用程序开发指南(第2版)》共18章和1个附录，是对第1版的全面升级，增补了大量ExtJS 4.0中的新特性。从基本的ExtJS功能开始讲解RIA Web开发，从而引出用户体验丰富的ExtJS技术。接着通过经典的“Hello ...
第1章 认识ExtJS 1.1 ExtJS的精彩表现 1.2 ExtJS的前世今生 1.3 是否真的需要学习ExtJS 1.4 ExtJS4.0新特性 1.5 ExtJSUI组件基础 1.6 了解一下类似技术 1.7 本章小结 第2章 开始ExtJS之旅 2.1 认识ExtJS的...
这是我花费数月写的关于Extjs的原创教程，共29个章节。下面是目录： 目 录 1 第一章：序 6 第二章：准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 六、小结 16 第三章：Ext ...
课程简介: ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架,本课程是一套基于Extjs4.1.1版本进行全新讲解...第二十讲.ExtJS之组件面向对象编程（二） 项目实战Extjs版在线选课系统:
书中详细讲述了EXT的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具等内容，每个知识点都配有相应的示例，可操作性极强，同时补充了两个功能强大的实例，并加入...
7.3. 第二！代理proxy和目标target 7.4. 再拖！再拖拖。 8. 哭泣吧！现在才开始讲基础问题。 8.1. Ext.get 8.2. 要是我们想一下子获得一堆元素咋办？ 8.3. DomHelper和Template动态生成html 8.3.1. ...
第二篇 Ext JS技术详解 第3章 JavaScript面向对象技术 36 第4章 Ext JS框架 58 第5章 Ext JS开发模式 86 第6章 Ext JS布局 102 第7章 表单组件 125 第8章 表格组件 148 第9章 表格组件的扩充 170 第10章 树形组件 ...
7.3. 第二！代理proxy和目标target 8. 哭泣吧！现在才开始讲基础问题。 8.1. Ext.get 8.2. 要是我们想一下子获得一堆元素咋办？ 8.3. DomHelper和Template动态生成html 8.3.1. DomHelper用来生成小片段 8.3.2. ...
7.3. 第二！代理proxy和目标target 7.4. yui自远方来，不亦乐乎 7.4.1. Basic，基础 7.4.2. Handles，把手 7.4.3. On Top，总在上边 7.4.4. Proxy，代理 7.4.5. Groups，组 7.4.6. Grid，网格 7.4.7. Circle，圆形 ...
7.3. 第二！代理proxy和目标target 8. 哭泣吧！现在才开始讲基础问题。 8.1. Ext.get 8.2. 要是我们想一下子获得一堆元素咋办？ 8.3. DomHelper和Template动态生成html 8.3.1. DomHelper用来生成小片段 8.3.2....
第二，授人以渔，宏观上对ext js的整体架构进行了分析，微观上则通过源代码深刻揭示了ext js的工作机制与原理，对于想了解ext js工作原理和在开发中碰到疑难问题的读者尤为有帮助。全书一共22章：第1章简要介绍了...
《extjs web应用程序开发指南(第2版)》共18章和1个附录，是对第1版的全面升级，增补了大量extjs 4.0中的新特性。从基本的extjs功能开始讲解ria web开发，从而引出用户体验丰富的extjs技术。接着通过经典的“hello ...
-修正extjs最新版本(v3.2.2)中的一个bug，如果下拉列表中存在两个相同的Text，则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...
第二个模块就是权限管理模块，这个模块管理了`管理员` 和 `用户`分别有哪些菜单权限，Vue 版本对齐进行了深入优化，角色可自由定义增删。  下面这个是菜单管理模块，功能可以对标...
-Button控件将不再自动拥有display:inline属性，如果希望两个按钮在一行显示，请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...