ExtJs4.2使用总结，1、引入及登陆

最新推荐文章于 2024-09-25 11:08:50 发布

原创最新推荐文章于 2024-09-25 11:08:50 发布 · 458 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在HTML页面中引入并使用ExtJS库创建一个包含登录表单的弹出窗口，同时展示了后台通过Servlet进行参数验证的示例代码。

一、extjs的引入及登陆窗口

如解压后的ext文件夹位于/WebContent下，在html页面<head>中进行如下引用：

<link href="./ext/resources/css/ext-all.css" type="text/css" rel="stylesheet"/>
<script src="./ext/ext-all.js"></script>
<script type="text/javascript">
    //在该处写extjs代码段,以登陆窗口为例
    Ext.onReady(function(){
        var winLogin = Ext.create("Ext.window.Window",{
            width:1600,
            height:570,
            modal:true,
            title:'登陆',
            resizable:false,
            items:[{
                xtype:'panel',
                width:'100%',
                height:420,
                padding:'1px',
                html:'<img src='img/logo.png' alt='软件logo' height='100%' width='100%'/>
            },{
                xtype:'from',
                width:'100%',
                id:'loginFrm',
                name:'loginFrm',
                padding:'1px',
                buttonAlign:'center',
                layout:{
                    type:'vbox',
                    align:'center',
                    pack:'center'
                },
                items:[{
                    xtype:'textfield',
                    id:'username',
                    name:'username',
                    fieldLable:'用户名',
                    width:300,
                    labelAlign:'right',
                    margin:'10,10,10,10',
                    allowBlank:false, //是否可以为空
                    blankText:'用记名不能为空'
                },{
                    xtype:'textfield',
                    id:'password',
                    name:'password',
                    fieldLabel:'密码',
                    width:300,
                    labelAlign:'right',
                    margin:'10,10,10,10',
                    allowBlank:false,
                    blankText:'密码不能为空',
                    inputType:'password’
                }],
                buttons:[{
                    text:'确定',
                    layout:'fit',
                    handler:function(){
                        var _username = Ext.getCmp("username").getValue();
                        var _password = Ext.getCmp("password").getValue();
                        if(_username == "" || _password == ""){
                             Ext.Msg.alert('提示','不能为空');
                        }else{
                            //遮罩层
                            var myMask = new Ext.LoadMask(Ext.getBody(),{msg:"正在登陆，请稍候......"});
                            myMask.show();
                            Ext.Ajax.request({
                                url:'./Login',
                                method:'post',
                                params:{
                                    username:_username,
                                    password:_password
                                },
                                success:function(response,opts){
                                    var sf = Ext.JSON.decode(response.responseText);
                                    if(sf.success){
                                        window.location.href = sf.location;
                                    }else {
                                        Ext.Msg.alert("提示","登陆失败");
                                    }
                                }
                            });
                        }
                    }
                }]
            }],
            renderTo:Ext.getBody()
        });
        winLogin.show();
    });
</script>

后台servlet代码如下：

response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
MyUtil myUtil = new MyUtil();  //自己写的工具类，内有验证登陆方法
boolean loginsta = myUtil.check_login(username,password);
if(loginsta){
    String location = "./Forward?param=login";
    res = "{success:true,location:'"+location+"'}";
}
response.getWrite().write(res);
response.getWrite().flush();
response.getWrite().close();