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

extjs技术交流，欢迎加群（201926085) 无废话ExtJs 入门教程七[登陆窗体Demo：Login]
在这节我们通过前几节讲的内容做一个登陆页面，把前几节讲的内容贯穿一下。
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>
秒客网

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

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

相关文章
