我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 39, 文章 - 310, 评论 - 411, 引用 - 0
数据加载中……

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>


posted on 2008-07-28 13:21 々上善若水々 阅读(6737) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。


网站导航: