使用ext2的form提交表单（非AJAX方式）

beckrabbit

浏览: 127544 次
性别:
来自: 杭州

最近访客更多访客>>

netinsect00

inag0000

爱岩修

dkl187788

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

项目开发笔记

Ajax EXT DWR json Struts

虽然ext自带的ajax支持还是不错的，可我还是习惯用DWR来做AJAX，因为对于J2ee开发来说这无疑是最好的选择

ext的form提供了两种表单方式，一是ajax的另一种是非ajax的，前者要求服务端返回的数据一定要是json格式，这让我很不习惯，还是dwr的好...在这里用登录窗口的例子，说一下后者。

后台就不多说了，至少需要一个验证用户的service方法 boolean userlogin(String username,String password);

或者返回String类型给用户更详细的登录失败信息。

如果用Struts来做界面控制的话需要一个userlogin.do 获取form提交的username和password，调用service层的userlogin方法决定跳转的页面。

首先添加一个FORM，直接在JS里面写下面代码就可以生成一个FORM ，无需任何页面代码。

js 代码

var simple = new Ext.form.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'../userlogin.do',
method:'POST',
frame:true,
title: '登录窗口',
bodyStyle:'padding:5px 5px 0',
width: 300,
defaults: {width: 200},
defaultType: 'textfield',
//实现非AJAX提交表单一定要加下面的两行！
onSubmit: Ext.emptyFn,
submit: function() {
//有疑问的地方
this.getEl().dom.action='../userlogin.do';
this.getEl().dom.submit();
},
items: [{
fieldLabel: '用户名',
id: 'username',
allowBlank:false,
width:150
},{
fieldLabel: '密码',
id: 'password',
allowBlank:false,
width:150,
inputType:'password'
}
],
buttons: [{
text: '登录',
type:'button',
id:'login',
handler: login
},{
text: '重置',
type:'reset',
id:'clear',
handler: reset
}
]
});

这个就是ext2.0的form模型，使用了新的Ext.form.FormPanel做form，需要注意的是使用非ajax也就是传统方式的话一定要在form的属性加入这两行：

js 代码

onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit();
},

这是API里指定的用法，可是我这么做确不能正确提交FORM ，仔细检查后发现ext生成的html代码中这个form没有action项，只有id和method，通过form的url属性和在submit参数中直接添加url或者action貌似都不起作用。

所以我在这里又加了一句：this.getEl().dom.action='../userlogin.do';在提交表单的时候直接把FORM的action属性设置到html里

这样就可以正确提交了，但不知道是不是最好的方法。

button的handler属性值确定了两个按钮按下时触发的方法。

js 代码

function reset(){
simple.form.reset();
}
function login(item){
simple.form.submit();
}

当然也可以在login中使用dwr进行ajax形式的表单提交。

分享到：

ext2的树组件的使用（从底层到表现层，异步 ... | 根据用户权限动态生成菜单

2007-10-16 22:25
浏览 16266
评论(19)
查看更多

19 楼 shazhenzhong 2008-12-23

1 jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>修改密码</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jsp/resources/css/ext-all.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/ext-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/hospital/layouts/password.js"></script>
</head>
<body>

</body>
</html>

2 使用的js
var simple;
Ext.onReady(function(){
var bd = Ext.getBody();
simple = new Ext.form.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'./user.jsp',
method:'POST',
frame:true,
title: '修改密码',
bodyStyle:'padding:5px 5px 0',
width: 300,
defaults: {width: 200},
defaultType: 'textfield',
//实现非AJAX提交表单一定要加下面的两行！
onSubmit: Ext.emptyFn,
submit: function() {
//有疑问的地方
this.getEl().dom.action='./user.jsp';
this.getEl().dom.submit();
},
items: [{
fieldLabel: '原始密码',
id: 'username',
allowBlank:false,
width:150
},{
fieldLabel: '新密码',
id: 'password',
allowBlank:false,
width:150,
inputType:'password'
},{
fieldLabel: '确认密码',
id: 'newpassword',
allowBlank:false,
width:150,
inputType:'password'
}
],
buttons: [{
text: '保存',
type:'button',
id:'login',
handler: login
},{
text: '重置',
type:'reset',
id:'clear',
handler: reset
}
]
});

simple.render(bd);

});
function reset(){
simple.form.reset();
}
function login(item){
simple.form.submit();

}

18 楼 gyb_sx 2008-07-03

能不能也给我一份email:gyb_sx@126.com
谢谢

17 楼 yangfengjob 2008-06-02

这个可以加上target=""吗.我想把返回的结果显示在另一个ifame中

16 楼 yangfengjob 2008-06-02

this.getEl().dom.action='setReportParams';
this.getEl().dom.submit();
这两句是啥意思啊..

15 楼 JaNer 2008-05-26

我也遇到了问题EXT + Struts的时候
这是我的旧命帖:
http://www.iteye.com/topic/196699
先用你的方法试试看~

14 楼 zhangygood 2008-03-26

可以发给我一份吗？谢谢
zhangy1207@163.com

13 楼 kaki 2008-02-12

前端本来就可以直接转换成json，为什么不用呢？？

12 楼 SeanHe 2008-02-04

function login(item){
simple.getForm().getEl().dom.action=......htm';
simple.getForm().getEl().dom.submit();
}

貌似这样写才能正确提交

11 楼 jansonzhan 2007-12-28

可以发一份给我嘛？谢谢！
jansonzhan@126.com

10 楼 rwhanson 2007-12-21

hi 兄弟,我初学ext2.0,正做这方面的项目,遇到了困难,
能不能给我发一份完整的代码.renwei0121@yahoo.com.cn

9 楼 liliang_xf 2007-12-19

同上，LZ能不能也给我发一份。谢谢！
liliang_xf@163.com

8 楼 liliang_xf 2007-12-19

同上，能不能发一份完整的代码给我。
liliang_xf@163.com

7 楼 hanyuhaha 2007-12-06

thanks

6 楼 andrewdu 2007-12-02

因为你使用了var simple = new Ext.form.FormPanel({
所以submit的隐含方法应该是下面这个形式

submit: function() {
            this.getForm().getEl().dom.submit();
        }

如果你要使用下面的代码来提交

this.getEl().dom.submit();

那么你要使用Ext.form.BasicForm 来创建

5 楼 lcq2009 2007-11-22

我也是Ext的FS，谢谢大家发这么好的例子[size=24][/size]

4 楼 lcq2009 2007-11-22

哥们，把你写的这个例子发到我Email：lcq2009@163.com

里面一起研究这个Ext，这样我们都可以很好的交流，人多力量大，谢谢！

3 楼 beckrabbit 2007-11-03

lzhxq 你用firebug看一下你的“this”指的是什么
如果this.getEl().dom得到的不是这个FORM的DOM当然不会有效果了

2 楼 lzhxq 2007-11-01

试过你的方法增加：this.getEl().dom.action='../userlogin.do';
但是根本没有生成FORM的action。

1 楼 bhuang 2007-10-18

初学中，我为什么运行你的代码不成功。能不能发一封完整的代码。

hbin81@163.com

谢谢！！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论