Fork me on GitHub

ExtJs学习笔记之学习小结LoginDemo

ExtJs学习小结LoginDemo

1、示例：（登录界面）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-js-4.2.1/ext-all.js"></script>
<script type="text/javascript" src="../ext-js-4.2.1/locale/ext-lang-zh_CN.js"></script>
  <style type="text/css">
          .loginicon
          {
              background-image: url(image/login.gif) !important;
          }
      </style>
<script type="text/javascript">
    Ext.onReady(function() {  
          //初始化标签中的Ext:Qtip属性
          Ext.QuickTips.init();
          Ext.form.Field.prototype.msgTarget = 'side';
          
          //提交按钮点击事件
          var btnsubmitclick = function(){
              if(form.getForm().isValid()){
                //通常发送到服务器端获取返回值再进行处理，我们在以后的教程中再讲解表单与服务器的交互问题。
                  Ext.Msg.alert('提示','登录成功');
              }else{
                  Ext.Msg.alert('警告','输入项有的不符合规则,请检查!');
              }
          }
          //重置按钮点击事件
          var btnresetclick = function(){
             form.getForm().reset();
          }
          
          //提交按钮
          var btnsubmit = new Ext.Button({
             text : '提 交',
             handler : btnsubmitclick
          });
          //重置按钮
          var btnreset = new Ext.Button({
             text : '重 置',
             handler : btnresetclick
          });
         
          
          //用户名input
          var txtusername = new Ext.form.TextField({
             width : 240,
             allowBlank : false,
             maxLength : 20,
             name : 'username',
             fieldLabel : '用户名称',
             blankText : '请输入用户名',
             maxLengthText : '用户名输入不能超过20个字符'
          });
          //密码input
          var txtpwd = new Ext.form.TextField({
             width : 240,
             allowBlank : false,
             maxLength : 20,
             name : 'password',
             inputType : 'password',
             fieldLabel : '密码',
             blankText : '请输入密码',
             maxLengthText : '密码输入不能超过20个字符'
          });
          //验证码input
          var txtcheckcode = new Ext.form.TextField({
              fieldLabel : '验证码',
              id : 'checkcode',
              allowBlank : false,
              width : 176,
              blankText : '请输入验证码',
              maxLength : 4,
              maxLengthText : '验证码不能超过四个字符!'
          });
        
        var form = new Ext.form.FormPanel({
            frame : true,
//             url : '***',
            labelAlign : 'right',
            labelWidth : 45,
//             cls : 'loginform',
            buttonAlign : 'center',
            bodyStyle : 'padding:6px 0px 0px 15px',
            items : [txtusername,txtpwd,txtcheckcode],
            buttons : [btnsubmit,btnreset]
        });
        
        var win = new Ext.Window({
            title : '用户登录',
            iconCls : 'loginicon',
            plain : true,
            width : 300,
            height : 200,
            resizable : false,
            shadow : true,
            modal : true,
            closable : true,
            animCollapse : true,
            items : form
        });
        win.show();
        //创建验证码
        var checkcode = Ext.getDom('checkcode');
        var checkimage = Ext.get(checkcode.parentNode);
        checkimage.createChild({
            tag : 'img',
            src : 'image/checkcode.gif'
            ,style : 'padding-left:23px;cursor:pointer;'
        });
        });  
</script>
</head>
<body>
  <!--
     说明：
     (1)iconCls: 'loginicon':给窗体加上小图标，样式在style中定义。
     (2)Ext.getDom('checkcode')：根据ID获取Dom。
     (3)Ext.get(checkcode.parentNode)：根据Dom获取父节点。
     (4)checkimage.createChild()：创建子节点，标签为<img src='image/checkcode.gif'..../>。
     (5)form.getForm().isValid()：校验表单的验证项是否全部通过。
     (6)form.getForm().reset()：重置表单。
 -->
</body>
</html>

2、效果图：

 

【说明：这个地方有两个地方有问题：(1)输入项前面的字体我设置的是右对齐，但是显示的左对齐  (2)下面的验证码图片应该是在验证码输入框右边的，结果却跑到下面去了。由于刚接触这个东西，不太了解，还望高手看到后能给解答一下，万分感谢！！！】

 

3、图片下载：

  登录标题上的图标

  验证码图标

posted on 2015-05-05 17:29  骑着乌龟漫步  阅读(297)  评论(0)  编辑  收藏  举报

导航