随笔 - 0, 文章 - 264, 评论 - 170, 引用 - 0
数据加载中……

ExtJs 之简单 Form提交(注:转载于http://www.blogjava.net/supercrsky/articles/218037.html)

<%@ 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 2010-12-24 22:37 小一败涂地 阅读(926) 评论(0)  编辑  收藏 所属分类: 前端开发(html、css、javascript、extjs等)相关


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


网站导航: