Ext2.2用户名和密码登录表单的例子_ext-api.device-server[2].account=admin-优快云博客

本文链接：https://blog.youkuaiyun.com/java2000_net/article/details/2949421

本文介绍了一个使用ExtJS框架实现的简单登录表单示例。该表单包括用户名和密码输入字段，并通过Ajax调用后端登录接口。代码中还包含了基本的样式设置和验证逻辑。

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

这个表单也是我使用中的一个东西。感觉还不错。

先看运行效果

看代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="adapter/prototype/prototype.js"></script>
<script type="text/javascript" src="adapter/prototype/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="adapter/prototype/ext-prototype-adapter.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<style type="text/css">
#LOGIN_FORM_LAYER {
  position:relative;
  top:150px;
  width: 965px;
  height: 551px;
}
#loginDIV {
  width:500px;
  position:relative;
  top:100px;
}
</style>
</head>
<body>
<center>
<script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    var bd = Ext.getBody();
    /*
     * ================  Simple form  =======================
     */
    //bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
    var simple = new Ext.FormPanel({
        id: 'LOGIN_FORM',
        labelWidth: 75, // label settings here cascade unless overridden
        url:'login.jsp',
        frame:true,
        title: '<font size=3>登录系统</font>',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',
        ctCls: 'font-size:12px',
        items: [{
                fieldLabel: '用户名',
                name: 'username',
                allowBlank:false
            },{
                fieldLabel: '密码',
                name: 'password',
                inputType :'password'
            },new Ext.form.Hidden({
              name:'referer',
              value:'/index'
            })
        ],
        buttons: [{
            id: 'submitButton',
            type: 'submit',
            text: '登录',
            tooltip: '点击这个按钮登录系统',
            handler: login
        }]
    });
    simple.render("loginDIV");
});
function login(){
  Ext.Ajax.request({
    url: '/login',
    form: 'LOGIN_FORM',
    success: function(t){
      alert(t.responseText);
    }
  });
}
</script>
<div id="LOGIN_FORM_LAYER">
<div id="loginDIV"></div>
</div>
</center>
</body>
</html>