extjs表单的非ajax提交方式

最新推荐文章于 2015-07-16 18:39:00 发布

i_am_wangzg

最新推荐文章于 2015-07-16 18:39:00 发布

阅读量3.9k

点赞数

分类专栏： extjs 文章标签： extjs ajax function login stylesheet html

extjs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

-----------------------------------------------------------------------
ext
EXT提交服务器的三种方式(转)
EXT表单的非ajax提交
使用extJs 2.0的form提交表单（非AJAX方式） [转]
-----------------------------------------------------------------------

HTML页面
-----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>New Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="lib/ext/ext-all.js">
        </script>
    </head>
    <script type="text/javascript">
        var simple;
        Ext.onReady(function(){
            simple = new Ext.form.FormPanel({
                renderTo: "loginForm",
                labelWidth: 75, // label settings here cascade unless overridden
                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 = 'login.do'; //连接到服务器的url地址
                    this.getEl().dom.submit();
                },

                items: [{
                    fieldLabel: '用户名',
                    id: 'username',
                    name: 'name',
                    allowBlank: false,
                    width: 150
                }, {
                    fieldLabel: '密码',
                    id: 'password',
                    name: 'pwd',
                    allowBlank: false,
                    width: 150,
                    inputType: 'password'

                }],
                buttons: [{
                    text: '登录',
                    type: 'button',
                    id: 'login',
                    handler: login //添加事件，执行函数为login()
                }, {
                    text: '重置',
                    type: 'reset',
                    id: 'clear',
                    handler: reset //添加事件，执行函数为reset()
                }]
            });

        });

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

        function reset(){
            simple.form.reset();
        }
    </script>
    </head>
    <body>
        <div id="loginForm">
        </div>
    </body>
</html>

-----------------------------------------------------------------------
Struts Action部分

-----------------------------------------------------------------------
package com.yourcompany.struts.action;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
import com.yourcompany.struts.form.LoginForm;

public class LoginAction extends DispatchAction {

    public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) {

        String username = request.getParameter("name");
        String password = request.getParameter("pwd");
        System.out.println("我的用户名：" + username);
        System.out.println("我的密码：" + password);
        return null;
    }
}

i_am_wangzg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs表单的非ajax提交方式

-----------------------------------------------------------------------extEXT提交服务器的三种方式(转)EXT表单的非ajax提交使用extJs 2.0的form提交表单（非AJAX方式） [转]-----------------------------------------------------
复制链接

扫一扫