思路
做一个简单的表单程序，用户登录。
目标，成功提交用户的信息，
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;
}
}
分享到：
相关推荐
第二个面板还启用了`closable`选项，这意味着用户可以通过点击右上角的“X”图标来关闭这个标签页。 最后，`tabs.activate(0)`激活了第一个面板，使其成为默认显示的内容： ```javascript tabs.activate(0); ``` ...
这本书分为三章，涵盖了Ext JS的关键概念和技术，旨在帮助开发者充分利用这个强大的JavaScript库来构建功能丰富的Web应用程序。 第一章可能涉及了Ext JS的基础和核心概念，包括MVC（Model-View-Controller）架构的...
《ExtJS Web应用程序开发指南(第2版)》共18章和1个附录，是对第1版的全面升级，增补了大量ExtJS 4.0中的新特性。从基本的ExtJS功能开始讲解RIA Web开发，从而引出用户体验丰富的ExtJS技术。接着通过经典的“Hello ...
深入浅出ExtJS（第二版）是一本关于ExtJS的详细教程，旨在帮助读者掌握这一强大的前端开发工具。 该随书源码包含三个不同版本的ExtJS源码：ext-3.0.0、ext-3.1.1和ext-3.2.0。这涵盖了ExtJS 3.x的主要迭代，每个...
#### 第二十七章：选项卡面板——Ext.TabPanel - **TabPanel概述**：介绍TabPanel组件的基本概念。 - **TabPanel标签操作**：展示如何动态添加、移除或切换选项卡。 - **标签弹出菜单**：为选项卡添加右键菜单以增强...
第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 是一个流行的JavaScript库，专门用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件和强大的数据绑定机制，使得开发者能够创建出交互性极强的网页应用。本教程主要聚焦于ExtJS 2.0版本的核心API，...
ExtJS 5.0.1 是一个流行的JavaScript框架，用于构建富客户端Web应用程序。这个版本在Web开发领域具有广泛的应用，因为它提供了丰富的组件库、强大的数据管理机制以及优雅的MVC（模型-视图-控制器）架构。"ext-5.0.1-...
2. **第二行**：类似地，设置了两个宽度各占46%的列，分别用于“座右铭1”和“座右铭2”的输入。这里需要注意的是，由于两列的总宽度超过了100%，但因为`columnWidth`是相对比例，所以实际并不会造成布局溢出。 3. ...
课程简介: ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架,本课程是一套基于Extjs4.1.1版本进行全新讲解...第二十讲.ExtJS之组件面向对象编程（二） 项目实战Extjs版在线选课系统:
2. **第二列**：宽度为22%（`columnWidth:.22`），同样采用表单布局，包含一个日期选择器（`datefield`）。该日期选择器没有设置字段标签，允许选择日期格式为月-日（`format:'m-d'`），并且限制最大长度为50个字符...
《深入浅出ExtJS(第二版)》是一本专注于JavaScript框架ExtJS的详细教程，旨在帮助读者全面理解和掌握这一强大的前端开发工具。该书的完整版包含目录，使得学习过程更为系统和有条理。 ExtJS是一个基于JavaScript的...
#### 第二十章：行模型与Grid视图 - **行选择模型**：讲解了如何配置GridPanel的行选择模型。 - **Grid视图**：介绍了Grid视图的概念及其在Extjs中的作用。 #### 第二十一章：GridPanel分页 - **跑跑题——JSON-LIB...
例如，如果已经有HTML表单，第二种方式可能最简单；如果需要创建复杂的表单并利用EXT JS的组件功能，第三种方式更合适。在处理失败情况时，通常都需要提供错误处理回调函数，以确保用户体验和数据的一致性。
在这里，`failure` 和 `success` 回调函数的第二个参数 `action` 包含了服务器响应的详细信息，如 `action.result.msg` 可以获取到服务器返回的消息。然而，`Ext.Ajax.request` 的一个显著缺点是不支持 `waitMsg` ...
"Extjs4.0 Web应用开发指南(第二版)-源代码"这本书的源码部分，不仅提供了EXTJS4.0的源代码，还提供了书中实例的实现，这对于学习EXTJS4.0的实际开发流程非常有帮助。通过对照书中的讲解和源码，开发者可以更深入地...
### ExtJs教程_完整版 —— 第一章起步（1）关键知识点详解 #### 一、ExtJS概述 **1.1 极致的用户体验** ExtJS是一个强大的JavaScript框架，专为Web应用开发而设计。它以其优雅的API、丰富的组件集合以及出色的跨...
alert('第二次编码后的值: ' + CustomFormName1); // 创建Ajax请求对象 var conn = Ext.lib.Ajax.getConnectionObject().conn; // 发送POST请求，并将编码后的中文参数拼接到URL中 conn.open("POST", "/...
##### 3.3 编写第一个 ExtJS 应用 - 创建一个简单的 ExtJS 组件，例如一个按钮： ```javascript Ext.onReady(function() { new Ext.Button({ text: 'Hello ExtJS', renderTo: document.body }); }); ``` #...
- **Extjs** 是一个基于 JavaScript 的框架，它通过采用面向对象编程（OOP）的方法来简化 Web 应用程序的开发过程。 - **核心开发人员 Jack** 将 OOP 在 Extjs 中发挥到了极致，使得原本看似杂乱无章的 JavaScript ...