ExtJs 之简单 Form提交

<%@ page language="java" pageEncoding="gbk"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
    <head>
        <link rel="stylesheet" type="text/css"
            href="<%=basePath%>/js/ext/resources/css/ext-all.css" />
        <script type="text/javascript"
            src="<%=basePath%>/js/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="<%=basePath%>/js/ext/ext-all.js"></script>
        <script type="text/javascript">
  Ext.onReady(function()
  {
       var form1 = new Ext.form.FormPanel({
       renderTo:"loginForm", //要渲染的div
       labelWidth: 75, // label settings here cascade unless overridden
       method:'POST',
       title: '登录窗口',
       bodyStyle:'padding:5px 5px 0',
       width: 300,
       defaults: {width: 200},
       defaultType: 'textfield',
       //实现非AJAX提交表单一定要加下面的两行!
       onSubmit: Ext.emptyFn,
       submit: function()
       {
           this.getEl().dom.action= 'index.jsp'; //连接到服务器的url地址
           this.getEl().dom.submit();
       },
      
       items: [{
           fieldLabel: '用户名',
           id: 'username',
           name: 'name',  
           allowBlank:false,
           blankText : "用户名不能为空",
           width:150
           },{
           fieldLabel: '密码',
           blankText : "密码不能为空",
           id: 'password',
           name: 'pwd',
           allowBlank:false,
           minLength : 6,
           width:150,
           inputType:'password' //类型为password
       }
       ],
       buttons: [{
           text: '登录',
           type:'button',
           id:'login',
           handler: function()
           {
                   //表单验证通过
                   if (form1.form.isValid())
                   {   
                       //提交form
                       form1.form.submit();
                   }   
           }
       },{
           text: '重置',
           type:'reset',
           id:'clear',
           handler: function()
           {
                form1.form.reset();
           }
       }
       ]
       });
   
    //将form添加window中
    var window = new Ext.Window({
        title: '用户登录',
        width: 300,
        height:180,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: form1
    });
    //显示window
    window.show();   
  });
 
</script>
    </head>
    <body>
        <div id="loginForm"></div>
    </body>
</html>

你可能感兴趣的:(Ajax,jsp,css,ext)