Extjs4 登陆界面

原文地址：http://fengxinnl.iteye.com/blog/1950585

<script src="ext4.2/bootstrap.js" type="text/javascript"></script>

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

    <script type="text/javascript">

        Ext.onReady(function () {

            var winLogin = Ext.create("Ext.window.Window", {

                width: 400,

                height: 270,

                modal: true, // 窗口弹出，其他地方不可操作  

                title: '&nbsp;登陆 ',

                collapsible: true,  // 收缩按钮  

                closable: false, // 是否显示关闭窗口按钮  

                iconCls: 'key', // cog , database_gear  

                resizable: false, // 窗体是否可以拉伸  

                constrain: true,

                items: [{

                    xtype: 'panel',

                    width: '100%',

                    height: 100,

                    padding: '1px',

                    html: "<img src='css/logo.png' alt='软件LOGO' height='100%' width='100%'/>"

                }, {

                    xtype: 'form',

                    width: '100%',

                    id: 'myform',

                    height: 140,

                    //frame: true,  

                    padding: '1px',

                    buttonAlign: 'center',

                    items: [{

                        xtype: 'textfield',

                        id: 'username',

                        name: 'username',

                        fieldCls: 'login_account',

                        fieldLabel: '账&nbsp;&nbsp;号&nbsp;&nbsp;',

                        width: 300,

                        margin: '10,10,10,10',

                        labelAlign: 'right',

                        allowBlank:false

                    }, {

                        xtype: "textfield",

                        id: 'password',

                        name: 'password',

                        fieldCls: 'login_password',

                        width: 300,

                        fieldLabel: '密&nbsp;&nbsp;码&nbsp;&nbsp;',

                        margin: '10,10,10,10',

                        labelAlign: 'right',

                        inputType: 'password',

                        allowBlank: false

                    }, {

                        xtype: 'panel',

                        width: '100%',

                        bodyStyle: 'border:0',

                        html: "<p align='right'>版权所有：XXXX科技有限公司</p>"

                    }],

                    buttons: [{

                        text: '登陆',

                        layout: 'fit',

                        type: 'submit',

                        handler: function () {

                            var _username = Ext.getCmp('username').getValue();

                            var _password = Ext.getCmp('password').getValue();



                            if (_username == "") {

                                Ext.Msg.alert("提示", "用户名不能为空，请输入用户名");

                            } else if (_password == "") {

                                Ext.Msg.alert("提示", "密码不能为空，请输入用户名");

                            } else {

                                // 掩饰层 (遮罩效果)  

                                var myMask = new Ext.LoadMask(Ext.getBody(), { msg: "正在登陆，请稍后..." });

                                myMask.show();



                                Ext.Ajax.request({

                                    url: 'login.aspx',

                                    method: 'POST',

                                    success: function (response, opts) {

                                        var sf = Ext.JSON.decode(response.responseText);

                                        if (sf.success) {

                                            myMask.hide();

                                            Ext.Msg.alert("提示", "登陆成功!!!");

                                            window.location.href = "toIndex.action";

                                        } else {

                                            myMask.hide();

                                            Ext.Msg.alert("提示", "登陆失败...");

                                        }

                                    },

                                    failure: function (response, opts) {

                                        myMask.hide();

                                        Ext.Msg.alert("提示", "登陆失败");

                                    },

                                    params: {

                                        username: _username,

                                        password: _password

                                    }

                                })

                            }

                        }

                    }, {

                        text: '重置',

                        handler: function () {

                            Ext.getCmp('myform').form.reset();

                        }

                    }]

                }],

                renderTo: Ext.getBody()

            });

            winLogin.show();

        })  

      

       

    </script>