Ext.form.FormPanel 独孤九剑-第四式 -优快云博客

本文介绍了一个使用 ExtJS 构建的简单表单示例，该表单包括用户名、昵称和注册日期等字段，并实现了提交及重置功能。通过 onReady 函数初始化表单，并设置提交至特定的 servlet 进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>onReady</title>
        <link rel="stylesheet" type="text/css"
            href="/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
        <script>
            Ext.onReady(function(){
              Ext.QuickTips.init();
              var form=new Ext.FormPanel({
                 frame:true,
                 width:300,
                 //monitorValid:true,//绑定验证
                 layout:"form",
                 labelWidth:70,
                 title:"添加个人信息",
                 labelAlign:"left",
                 renderTo:Ext.getBody(),
                 submit: function(){
                                this.getEl().dom.action = '/servlet/Login.do',
                                this.getEl().dom.method='POST',
                                this.getEl().dom.submit();
                          },
                 items:[{
                           xtype:"textfield",
                           fieldLabel:"用户名",
                           //id:"UserName",
                           allowBlank:false,
                           blankText:"不能为空，请正确填写",
                           name:"UserName",
                           anchor:"90%"
                       },{
                           xtype:"textfield",
                           fieldLabel:"昵称",
                           //id:"SmallName",
                           name:"SmallName",
                           anchor:"90%"
                       },{
                           xtype:"datefield",
                           fieldLabel:"注册日期",
                           //id:"RegDate",
                           name:"RegDate",
                           anchor:"90%"
                       }],
                buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]
                });
                  function login(){
                     form.form.submit();
                     }
                function reset(){
                    form.form.reset();
                   }
                });
        </script>
    </head>
    <body>
    </body>
</html>

servlet:

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        String userName = request.getParameter("UserName");
        String smallName = request.getParameter("SmallName");
        String regDate = request.getParameter("RegDate");
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.print(userName + "--------->");
        out.print(smallName + "--------->");
        out.print(regDate + "--------->");
        out.flush();
        out.close();
    }