无废话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>
2.效果如下：
3.附件如下：
：login.gif
：checkcode.gif
无废话ExtJs 入门教程七[登陆窗体Demo：Login]的更多相关文章
- 无废话ExtJs 入门教程三[窗体：Window组件]
无废话ExtJs 入门教程三[窗体:Window组件] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3 ...
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十四[文本编辑器：Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十三[上传图片：File]
无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程十一[下拉列表：Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
随机推荐
- qt-5.6.0 移植之纯净的linux文件系统的建立
为什么要建立一个最纯净的文件系统,一开始是想在qt-4.8.5的文件系统基础之上加东西,慎重想了一下,这方法行不通,以为有很多东西不熟悉.干脆就自己建立一个. 步骤很简单: 一:下载一个bulidro ...
- Python学习笔记一
原来Python的文件配置好环境变量直接双击就可以运行,当然也可以控制台+编辑器 first try: import turtle window=turtle.Screen() babbage=tur ...
- BZOJ 4423: [AMPPZ2013]Bytehattan
Sol 对偶图+并查集. 思路非常好,将网格图转化成对偶图,在原图中删掉一条边,相当于在对偶图中连上一条边(其实就是网格的格点相互连边),每次加边用并查集维护就可以了. 哦对,还要注意边界就是网格外面 ...
- C# 基于json通讯中的中文的处理
如果通讯中产生了\\u4e00-\\u9fa5范围的中文的unicode代码,而不是\u4e00-\u9fa5范围的,那么c#的处理就比较麻烦了. 破解方法: 机制 它会把\\u4e00拆成部分来识别 ...
- 基于HTK语音工具包进行孤立词识别的使用教程
选自:http://my.oschina.net/jamesju/blog/116151 1前言 最近一直在研究HTK语音识别工具包,前几天完成了工具包的安装编译和测试,这几天又按耐不住好奇,决定自己 ...
- Ubuntu里面软件的安装与卸载
在Ubuntu里面,有时候碰到软件配置错了,这是重新再安装的话,会检测到已安装,系统不会再重新安装,就需要卸载之后重装 1.通过deb包安装的情况: 安装.deb包: 代码:sudo dpkg -i ...
- POJ 1456（贪心）
#include <string.h> #include <iostream> #include <queue> #include <stdio.h> ...
- action 方法的访问
Action中的方法的访问: 访问Action的中的方法,默认情况下只能访问execute方法.那么多次请求就不能提交到一个Action.能不能一个模块的多次请求提交到一个Action中? * 需要使 ...
- tomcat有哪些性能调优方法
前几天看见一篇介绍性能调优文章,觉得不错.特此收藏(http://blog.csdn.net/lifetragedy/article/details/7708724)
- 64位win系统上面tomcat6启动不了 window不能再本地计算机启动
64位的jdk装完之后,jre的bin目录下面没有client文件夹, 而tomcat6.0.20的默认配置启动在client文件夹下面. 所以打开tomcat6w,在java选项界面,取消Use d ...