人员登入2 ---登入页面

Z时代
2024-01-10
分类：技术分享

上一篇博客我们已经把jboss整合进开发工具eclipse里，并建立好了开发项目Person。今天我们就要开始项目的开发了。

今天主要讲用extjs4制作登入界面.

首先我们要把extjs的包导入到项目WenContent下

导入之前先设置项目

右键项目点击Properties

人员登入2 ---登入页面

取消第一和第四个钩，不然检查验证extjs4的js文件会很久且会卡

导入后目录结构：（要用到的图片我也导入了在images里面)

人员登入2 ---登入页面

打开已经建好index.html，修改为(代码有注释)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登入</title>


<script type="text/javascript" src="https://www.pianshen.com/article/5246134098/Ext4.2/bootstrap.js"></script>
<script type="text/javascript" src="https://www.pianshen.com/article/5246134098/Ext4.2/locale/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.pianshen.com/article/5246134098/Ext4.2/resources/css/ext-all-neptune.css" />


<script type="text/javascript" src="https://www.pianshen.com/article/5246134098/login.js"></script>

<style>
        #login_form{
            /*利用绝对定位实现*/
            position: absolute;
            width:450px;
            height:300px;
            /*使div左上的点居中*/
            left:50%;
            top:50%;
            /*使盒子往左上分别移动宽高的一半，实现居中*/
            margin-left:-225px;
            margin-top:-150px;
            background: #000000;

        }

    </style>
</head>

<body>
<div id="login_form">

</div>
</body>
</html>

接下来就是用extjs编写登入窗口了,在WebContent下建立login.js文件

Ext.onReady(function() {

    //使用表单提示
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    //创建表单
    var formPanel =Ext.create('Ext.form.Panel', {
        bodyStyle:"background-image:url('images/body.png')",

        renderTo: 'login_form',//根据id渲染到html页面

        title: '用户登入',
        width: 450,
        height: 300,
        bodyPadding: '40 0 0 0',//form内容的padding值
        buttonAlign: "center",//按钮居中

        frame: true,

        //文字靠右,文字宽度为50，缩小账号与输入框的距离
        fieldDefaults: {
            labelAlign: 'left',
            labelWidth: 50

        },

        items:[{
            xtype:'textfield',
            fieldLabel:'账 号',// 为空格
            name:'username',//表单提交参数
            //居中
            style:" margin:0 auto",
            width:250,
            height:25,
            emptyText: '请输入账号',
            allowBlank:false,
            blankText:'账号不能为空!',
            minLength:2,
            minLengthText:'账号的长度为大于1',
            maxLength:20,
            maxLengthText:'账号的长度为小于20'
        },{
            xtype:'textfield',
            inputType:"password",
            fieldLabel:"密 码",
            //居中
            style: {
                margin:'0 auto',
                marginTop: '25px'
            },
            width:250,
            height:25,
            emptyText: '请输入密码',
            name:'password',
            allowBlank:false,
            blankText:'密码不能为空!',
            minLength:2,
            minLengthText:'密码的长度为大于1'

        }

        ],
        buttons:[{
            text:"登入",
            type:"submit",
            handler:login//处理函数
        },{
            text:"重置",

            handler:function(){
                //重置表单
                formPanel.form.reset();
            }
        }]

    });

    function login()
    {
        //用户登入方法
        Ext.MessageBox.alert("系统提示","登入成功");
    }

});