2007-10-16

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

关键字: ext2 form ext

虽然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 代码
  1. var simple = new Ext.form.FormPanel({
  3. labelWidth: 75, // label settings here cascade unless overridden
  4. url:'../userlogin.do',
  5. method:'POST',
  6. frame:true,
  7. title: '登录窗口',
  8. bodyStyle:'padding:5px 5px 0',
  9. width: 300,
  10. defaults: {width: 200},
  11. defaultType: 'textfield',
  12. //实现非AJAX提交表单一定要加下面的两行！
  13. onSubmit: Ext.emptyFn,
  14. submit: function() {
  15. //有疑问的地方
  16. this.getEl().dom.action='../userlogin.do';
  17. this.getEl().dom.submit();
  18. },
  19. items: [{
  20. fieldLabel: '用户名',
  21. id: 'username',
  22. allowBlank:false,
  23. width:150
  24. },{
  25. fieldLabel: '密码',
  26. id: 'password',
  27. allowBlank:false,
  28. width:150,
  29. inputType:'password'
  31. }
  32. ],
  33. buttons: [{
  34. text: '登录',
  35. type:'button',
  36. id:'login',
  37. handler: login
  38. },{
  39. text: '重置',
  40. type:'reset',
  41. id:'clear',
  42. handler: reset
  43. }
  44. ]
  45. });

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

js 代码
  1. onSubmit: Ext.emptyFn,
  3. submit: function() {
  5. this.getEl().dom.submit();
  7. },

这是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 代码
  1. function reset(){
  2. simple.form.reset();
  3. }
  4. function login(item){
  5. simple.form.submit();
  7. }
当然也可以在login中使用dwr进行ajax形式的表单提交。
评论
gyb_sx@126.com 2008-07-03
能不能也给我一份email:gyb_sx@126.com
谢谢
yangfengjob 2008-06-02
这个可以加上target=""吗.我想把返回的结果显示在另一个ifame中
yangfengjob 2008-06-02
this.getEl().dom.action='setReportParams';
this.getEl().dom.submit();
这两句是啥意思啊..
JaNer 2008-05-26
我也遇到了问题EXT + Struts的时候
这是我的旧命帖:
http://www.javaeye.com/topic/196699
先用你的方法试试看~
zhangygood 2008-03-26
可以发给我一份吗？谢谢
zhangy1207@163.com
kaki 2008-02-12
前端本来就可以直接转换成json，为什么不用呢？？
SeanHe 2008-02-04
function login(item){
simple.getForm().getEl().dom.action=......htm';
simple.getForm().getEl().dom.submit();
}

貌似这样写才能正确提交
jansonzhan 2007-12-28
可以发一份给我嘛？谢谢！
jansonzhan@126.com
rwhanson 2007-12-21
hi 兄弟,我初学ext2.0,正做这方面的项目,遇到了困难,
能不能给我发一份完整的代码.renwei0121@yahoo.com.cn
liliang_xf 2007-12-19
同上，LZ能不能也给我发一份。谢谢！
liliang_xf@163.com
liliang_xf 2007-12-19
同上， 能不能发一份完整的代码给我。
liliang_xf@163.com
hanyuhaha 2007-12-06
thanks
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 来创建
lcq2009 2007-11-22
我也是Ext的FS，谢谢大家发这么好的例子[size=24][/size]
lcq2009 2007-11-22
哥们，把你写的这个例子发到我Email：lcq2009@163.com

里面一起研究这个Ext，这样我们都可以很好的交流，人多力量大，谢谢！
beckrabbit 2007-11-03
lzhxq 你用firebug看一下你的“this”指的是什么
如果this.getEl().dom得到的不是这个FORM的DOM当然不会有效果了
lzhxq 2007-11-01
试过你的方法增加：this.getEl().dom.action='../userlogin.do';
但是根本没有生成FORM的action。
bhuang 2007-10-18
初学中，我为什么运行你的代码不成功。能不能发一封完整的代码。

hbin81@163.com

谢谢！！
发表评论

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

beckrabbit
搜索本博客
存档
最新评论