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>