ExtJs 入门教程七[登陆窗体Demo：Login]

u014490157

于 2015-09-03 15:57:22 发布

阅读量383

点赞数

在这节我们通过前几节讲的内容做一个登陆页面，把前几节讲的内容贯穿一下。

1.代码如下：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <!--ExtJs框架开始-->
  6     <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
  7     <script type="text/javascript" src="/Ext/ext-all.js"></script>
  8     <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
  9     <style type="text/css">
 10         .loginicon
 11         {
 12             background-image: url(image/login.gif) !important;
 13         }
 14     </style>
 15     <!--ExtJs框架结束-->
 16     <script type="text/javascript">
 17         Ext.onReady(function () {
 18             //初始化标签中的Ext:Qtip属性。
 19             Ext.QuickTips.init();
 20             Ext.form.Field.prototype.msgTarget = 'side';
 21             //提交按钮处理方法
 22             var btnsubmitclick = function () {
 23                 if (form.getForm().isValid()) {
 24                     //通常发送到服务器端获取返回值再进行处理，我们在以后的教程中再讲解表单与服务器的交互问题。
 25                     Ext.Msg.alert("提示", "登陆成功!");
 26                 }
 27             }
 28             //重置按钮"点击时"处理方法
 29             var btnresetclick = function () {
 30                 form.getForm().reset();
 31             }
 32             //提交按钮
 33             var btnsubmit = new Ext.Button({
 34                 text: '提 交',
 35                 handler: btnsubmitclick
 36             });
 37             //重置按钮
 38             var btnreset = new Ext.Button({
 39                 text: '重 置',
 40                 handler: btnresetclick
 41             });
 42             //用户名input
 43             var txtusername = new Ext.form.TextField({
 44                 width: 140,
 45                 allowBlank: false,
 46                 maxLength: 20,
 47                 name: 'username',
 48                 fieldLabel: '用户名',
 49                 blankText: '请输入用户名',
 50                 maxLengthText: '用户名不能超过20个字符'
 51             });
 52             //密码input
 53             var txtpassword = new Ext.form.TextField({
 54                 width: 140,
 55                 allowBlank: false,
 56                 maxLength: 20,
 57                 inputType: 'password',
 58                 name: 'password',
 59                 fieldLabel: '密　码',
 60                 blankText: '请输入密码',
 61                 maxLengthText: '密码不能超过20个字符'
 62             });
 63             //验证码input
 64             var txtcheckcode = new Ext.form.TextField({
 65                 fieldLabel: '验证码',
 66                 id: 'checkcode',
 67                 allowBlank: false,
 68                 width: 76,
 69                 blankText: '请输入验证码！',
 70                 maxLength: 4,
 71                 maxLengthText: '验证码不能超过4个字符!'
 72             });
 73             //表单
 74             var form = new Ext.form.FormPanel({
 75                 url: '******',
 76                 labelAlign: 'right',
 77                 labelWidth: 45,
 78                 frame: true,
 79                 cls: 'loginform',
 80                 buttonAlign: 'center',
 81                 bodyStyle: 'padding:6px 0px 0px 15px',
 82                 items: [txtusername, txtpassword, txtcheckcode],
 83                 buttons: [btnsubmit, btnreset]
 84             });
 85             //窗体
 86             var win = new Ext.Window({
 87                 title: '用户登陆',
 88                 iconCls: 'loginicon',
 89                 plain: true,
 90                 width: 276,
 91                 height: 174,
 92                 resizable: false,
 93                 shadow: true,
 94                 modal: true,
 95                 closable: false,
 96                 animCollapse: true,
 97                 items: form
 98             });
 99             win.show();
100             //创建验证码
101             var checkcode = Ext.getDom('checkcode');
102             var checkimage = Ext.get(checkcode.parentNode);
103             checkimage.createChild({
104                 tag: 'img',
105                 src: 'image/checkcode.gif',
106                 align: 'absbottom',
107                 style: 'padding-left:23px;cursor:pointer;'
108             });
109         });
110     </script>
111 </head>
112 <body>
113 <!--
114 说明：
115 (1)88行，iconCls: 'loginicon':给窗体加上小图标，样式在第12行定义。
116 (2)Ext.getDom('checkcode')：根据ID获取Dom。
117 (3)Ext.get(checkcode.parentNode)：根据Dom获取父节点。
118 (4)checkimage.createChild()：创建子节点，标签为<img src='image/checkcode.gif'..../>。
119 (5)form.getForm().isValid()：校验表单的验证项是否全部通过。
120 (6)form.getForm().reset()：重置表单。
121 -->
122 </body>
123 </html>