extjs 我的第二个ext程序：表单

ll_feng · 发表于 2013-1-23 02:14:32

思路
做一个简单的表单程序，用户登录。
目标，成功提交用户的信息，
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="json" namespace="/" extends="json-default"><action name="login" class="cn.ibeans.demo.web.action.LoginAction"><result type="json"/></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;}}

		自动登录	找回密码
密码			立即注册