自我提升之Extjs篇：Extjs登录页面制作

（写给自己看，不要太多铺垫修饰）

效果图

 

首先，引入必须的js和css文件

<link href="js/extjs/resources/css/ext-all.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/extjs/ext-all.js"></script>

下面开始写js脚本实现了，不清楚的代码注释写在后面

<script type="text/javascript">
        Ext.onReady(function () {
            
            Ext.form.Field.prototype.msgTarget = 'side';
            Ext.QuickTips.init(); //初始化提示信息
            var win = new Ext.Window({
                iconCls: 'icon-admin',
                title: '系统登录',
                width: 330,
                closable: false,
                draggable: false,
                resizable: false,
                shadowOffset: 0,
                defaults: { border: false },
                buttonAlign: 'center',
                items: form = new Ext.FormPanel({
                    id: 'loginForm',
                    bodyStyle: 'padding-top:10px',
                    defaultType: 'textfield',
                    labelAlign: 'right',
                    height: 80,
                    frame: true,
                    defaults: { allowBlank: false, autowidth: true, width: 160 },
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: '用户名',
                        name: 'username',
                        blankText: '用户名不能为空！'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: '密 码',
                        name: 'password',
                        inputType: 'password',
                        blankText: '密码不能为空！'
                    }]
                }),
                buttons: [{
                    text: '登 录',
                    id: 'login',
                    iconCls: 'icon-ok',
                    iconAlign: 'left',
                    type: 'submit',
                    handler: function () {
                        if (form.getForm().isValid()) {//验证通过
                            form.form.submit({
                                waitTitle: '登录',
                                waitMsg: '正在登录...',
                                url: 'handle/LoginHandle.aspx',
                                method: 'post',
                                params:'',
                                success: function (response) {
                                    Ext.Msg.alert("提示", "方法调用成功");
                                },
                                failure: function (response, option) {
                                    Ext.Msg.alert("提示", option.result.message);
                                }
                            })
                        }
                    }
                },
                {
                    text: '重置',
                    iconCls: 'icon-rpt',
                    type: 'submit',
                    handler: function () {
                        form.getForm().reset();
                    }
                }]
            });
            win.show();
        });
    </script>

后台处理程序：

 

        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write("{success:false,message:'错误'}");
        }