ExtJs登录界面（修改中）

login.js中的代码

var loginPanel;

Ext.QuickTips.init();

Ext.onReady(function() {


   var   bgObj=document.createElement("div");//创建一个div对象（背景层）
    //定义div属性
    bgObj.setAttribute("id","bgDiv");
    bgObj.style.position="absolute";

    bgObj.style.background="#777";
    bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
    bgObj.style.opacity="0.6";

    //bgObj.style.bottom = "75%";
    bgObj.style.padding = "10px";
    bgObj.style.width="100%";
    bgObj.style.height="100%";
    bgObj.style.zIndex   =  "10000";
    document.body.appendChild(bgObj);//在body内添加该div对象


    var   bottomer=document.createElement("div");//创建一个div对象（背景层）
    //定义div属性
    bottomer.setAttribute("id","btDiv");
    bottomer.style.position="absolute";

    bottomer.style.background="#777";
    bottomer.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
    bottomer.style.opacity="0.6";

    bottomer.style.top = "95%";
    bottomer.style.padding = "10px";
    bottomer.style.width="100%";
    bottomer.style.height="100%";
    bottomer.style.zIndex   =  "10000";
    document.body.appendChild(bottomer);//在body内添加该div对象


    var img = document.createElement("img");
    img.setAttribute("src", "image/banner.jpg");
 //   document.body.appendChild(img);


    var loginFormPanel = new Ext.FormPanel(
    {
        id : 'login-form',
        //                      labelWidth : 55,
        frame : false,
       // bodyStyle:"background-image:url(image/login.jpg)",
        bodyStyle : 'background-image:url(image/login1.jpg) ; padding-top: 100px ; padding-right:5px; padding-left:50px;border: 0px solid;',

        defaultType : 'textfield',
        method : 'POST',
        bodyBorder : true,
        border : false,
        align:'center',
        plain:true,
        width : 380,
        height : 300,
            buttonAlign : 'center',
            labelAlign : 'right',
        layout: "form",

        items : [
        {
            id : 'j_username',
            name : 'j_username',
            x:493,
            y:200,
            width:150,
            fieldLabel: '用户名',
            cls : 'png-user',
                  inputTpye : 'username',
            value :'admin',
            allowBlank : false,
            blankText : '请输入用户名'
        },
        {
            id : 'j_password',
            name : 'j_password',
            x:493,
            y:225,
            width:150,
            fieldLabel:"密码",
            cls : 'png-password',
            inputType : 'password',
            value :'admin',
            allowBlank : false,
            blankText : '请输入密码'
        },
        {
            id : 'j_check',
            name : 'j_check',
            x:493,
            y:250,
            width:150,
            fieldLabel: '验证码',
            allowBlank : true,
            blankText : '请输入验证码'
        },
        {
            id : 'j_image',
            name : 'j_image',
            x:493,
            y:275,
            width:60,
            style : 'background:url(Random.jsp);background-repeat:no-repeat'
        } ],
        buttons : [
        {
            text : '登录',
            iconCls : 'png-tick',
            //iconAlign: 'right',
            handler : function() {
                if (loginFormPanel.form.isValid()) {
                    loginFormPanel.form.submit( {
                        url : 'servlet/LoginServlet',
                        success : function(from, action) {
                            var messager = Ext.decode(action.response.responseText);
                            if (messager.success) {
                                location.href = "Home/mmain.jsp";
                            }
                            else{
                                Ext.Msg.alert('提示信息', message.msg);
                            }
                        },
                        failure : function(form, action) {
                            Ext.Msg.alert('提示信息', '登录失败！');
                        },
                        waitMsg : '正在登录，稍后...'
                    });
                //               formWin.hide();
                } else {
                    Ext.Msg.alert('信息', '请填写完成再提交!');
                }
            }
        }, {
        text : '重置',
        iconCls : 'png-arrow_undo',
        handler : function() {
            loginFormPanel.form.reset();
        }
    } ]

    renderTo : 'bgDiv',
    });




var loginPanel = new Ext.Panel(
{


    frame : false,

      bodyStyle : 'background-image:url(image/back.jpg); padding-top: 169px; padding-left: 380px; border: 2px solid;',


    bodyBorder : true,
    border : false,
    align:"center",

    width:1600,
    height:1200,
    plain:true,

    items :
    [loginFormPanel]

    });

var loginport=new Ext.Viewport({
    layout: {
        type: 'hbox',
        align: 'middle ',
        pack: 'center'
    },

    border:true,
    region:'center',
    align:'center',
    renderTo : Ext.getBody(),
    items:loginPanel
});

});

login.jsp中的代码

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="cn.TLF.Coal.Dao.UsersDAO"%>
<%@page import="cn.TLF.Coal.Util.JsonUtil"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>

        <title>用户登录</title>


        <link rel="stylesheet" type="text/css"
            href="ext3/resources/css/ext-all.css" />

<style type=text/css>
.png-tick{
background:url(image/icon/accept.png);
}
</style>

<style type=text/css>
.png-arrow_undo{
background:url(image/icon/cancel.png);
}
</style>

<style type=text/css>
.png-user{
background-image:url(image/icon/user.png);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
</style>

<style type=text/css>
.png-password{
background-image:url(image/icon/lock.png);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
</style>


        <script type="text/javascript" src="ext3/adapter/ext/ext-base.js">
</script>
        <script type="text/javascript" src="ext3/ext-all-debug.js">
</script>

        <script type="text/javascript" src="login.js">
</script>

    </head>

    <body>
    </body>
</html>