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>

---

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。