ExtJS4.2学习(22)登录界面



现在开始我们来慢慢完善这个系统,今天做一个登录界面,此套系统已经开始慢慢加入Java各种框架,或者后期我会自己定义合适的框架,让它可以完整的跑下来。rHq思考者日记网-束洋洋个人博客

今天做的是用window包裹panel,panel再包裹tabpanel实现的:先来看看今天做的效果图:rHq思考者日记网-束洋洋个人博客

login.jpgrHq思考者日记网-束洋洋个人博客

about.jpgrHq思考者日记网-束洋洋个人博客

login.jsprHq思考者日记网-束洋洋个人博客

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>登录-ExtJS4.2学习之路</title>  
<link href="../ExtJS4.2/resources/css/ext-all-neptune-rtl.css" rel="stylesheet">  
<link href="../ExtJS4.2/css/icon.css" rel="stylesheet">  
<script src="../ExtJS4.2/ext-all.js"></script>  
<script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>  
<script type="text/javascript" src="../demo/js/login.js"></script>  
<style type="text/css">  
.user{background: url(../ExtJS4.2/icons/user.png) no-repeat 2px 2px;}  
.key{background: url(../ExtJS4.2/icons/key.png) no-repeat 2px 2px;}  
.Userkey{background: url(../ExtJS4.2/icons/Userkey.png) no-repeat 2px 2px;}  
.key,.user,.Userkey{  
            background-color: #FFFFFF;  
            padding-left: 20px;  
            font-size: 12px;  
        }  
.bgimage {   
   background:url(../demo/image/logo.jpg ) no-repeat top;  
   position:absolute;  
}  
</style>  
</head>  
<body>  
    <div id="hello-tabs">  
        <!-- <img border="0" width="430" height="60"    src="../demo/image/logo.jpg" /> -->  
    </div>  
    <div id="aboutDiv" class="x-hidden"  
        style='color: black; padding-left: 10px; padding-top: 10px; font-size: 12px'>  
    思考者日记网ExtJs学习系统 v1.0<br/><br/>  
    ©2013-2014 思考者日记网|束洋洋个人博客(沪ICP备13005070)<br/><br/>  
    官方网站:<a href="http://www.shuyangyang.com.cn" target="_blank">www.shuyangyang.com.cn</a>  
    </div>  
</body>  
</html> 

其中自定义了一些CSS和自己加的DIV,为了实现上面的图片和tabpanel里的东西,再看看关键的login.jsrHq思考者日记网-束洋洋个人博客

Ext.onReady(function() {  
    var userLoginPanel = Ext.create('Ext.panel.Panel', {  
        bodyCls: 'bgimage',  
        border : false,  
        defaults:{  
            margin:'58 0'  
        },  
        items:{  
            xtype : 'tabpanel',  
            id : 'loginTabs',  
            activeTab : 0,  
            height : 180,  
            border : false,  
            items:[{  
                title : "身份认证",  
                xtype : 'form',  
                id : 'loginForm',  
                defaults : {  
                    width : 260,  
                    margin: '10 0 0 70'  
                },  
                // The fields  
                defaultType : 'textfield',  
                labelWidth : 40,  
                items: [{  
                    fieldLabel: '用户名',  
                    cls : 'user',  
                    name: 'username',  
                    labelAlign:'right',  
                    labelWidth:65,  
                    maxLength : 30,  
                    emptyText:'请在这里填写用户名',  
                    maxLengthText : '账号的最大长度为30个字符',  
                    blankText:"用户名不能为空,请填写!",//错误提示信息,默认为This field is required!  
                    allowBlank: false  
                },{  
                    fieldLabel: '密   码',  
                    cls : 'key',  
                    name: 'password',  
                    inputType:"password",  
                    labelWidth:65,  
                    labelAlign:'right',  
                    emptyText:'请在这里填写密码',  
                    maxLengthText :'密码长度不能超过20',  
                    maxLength : 20,  
                    blankText:"密码不能为空,请填写!",//错误提示信息,默认为This field is required!  
                    allowBlank: false  
                },{  
                    xtype:"combo",  
                    fieldLabel: '角   色',  
                    cls : 'Userkey',  
                    name: 'role',  
                    labelAlign:'right',  
                    labelWidth:65,  
                    store:["管理员","校领导","教职工"],//数据源为一数组  
                    emptyText:'请选择角色.',  
                    blankText:"请选择角色!",//错误提示信息,默认为This field is required!  
                    allowBlank: false  
                }, {  
                    id : 'id_reg_panel',  
                    xtype : 'panel',  
                    border : false,  
                    hidden : true,  
                    html : '<br><span id='messageTip' style='color:red'> </span>'  
                }]  
            }, {  
                title : '关于',  
                contentEl : 'aboutDiv',  
                defaults : {  
                    width : 230  
                }  
            }]  
        }  
    });  
      
    Ext.create('Ext.window.Window', {  
        title : 'SHUYANGYANG®ExtJs学习系统',  
        width : 440,  
        height : 300,  
        layout: 'fit',  
        plain : true,  
        modal : true,  
        maximizable : false,  
        draggable : false,  
        closable : false,  
        resizable : false,  
        items: userLoginPanel,  
        // 重置 和 登录 按钮.  
        buttons: [{  
            text: '重置',  
            iconCls : 'Wrench',  
            handler: function() {  
                Ext.Msg.alert('提示', '重置!');  
            }  
        }, {  
            text: '登录',  
            iconCls : 'User',  
            handler: function() {  
                Ext.Msg.wait("请等待", "温馨提示", {  
                    text:'正在登录……'  
                });  
            }  
        }]  
    }).show();  
});  

这里大家可以自由发挥,加一些触发事件来实现与后台交互,这里我就不多写了,后续完善的时候我会写出来,因为现在静态要实现的太多了,慢慢来。看到不懂的属性或者地方,大家就去查API吧,相信学了这么久,这个你应该会的吧?rHq思考者日记网-束洋洋个人博客

 rHq思考者日记网-束洋洋个人博客

 rHq思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridrHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridrHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingrHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格rHq思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldrHq思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件rHq思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorrHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 rHq思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解rHq思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目rHq思考者日记网-束洋洋个人博客

 rHq思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈