ExtJs学习笔记之学习小结LoginDemo

时间：2022-03-27 05:10:56

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、效果图：

ExtJs学习笔记之学习小结LoginDemo

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

3、图片下载：

ExtJs学习笔记之学习小结LoginDemo  登录标题上的图标

ExtJs学习笔记之学习小结LoginDemo  验证码图标

相关文章