无废话ExtJs 入门教程七[登陆窗体Demo:Login]
无废话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
关注 - 37
粉丝 - 1827
» 下一篇:无废话ExtJs 入门教程八[脚本调试Firefox:firebug]
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u122671.jpg?id=01173135
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/285407/20150905173839.png
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u83367.jpg
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u205136.jpg?id=28151239
4.1..更简洁也更优雅...
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u296452.jpg?id=18154419
3和4差别是稍微大了些,但大部分还是相同的,我们在开发中选择了3也是因为很多公司用3开发没有产生法律纠纷[毕竟2.2以后开始收费了],这里只做的是入门教程,以简单易懂、循序渐进的形式让大家大实际的项目中应用Ext,教程后期会有一个往新版本过渡的过程,本人也是初学,还请多多指教。
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u414533.gif?id=31160526
恩,谢谢指正,全放在onready里写是因为,这样“表面上看起来”比较清晰,更容易让人理解,当把组件这块讲完后,会基于项目开发上的一些经验做些效率上的简单讲解。
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u414533.gif?id=31160526
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u41249.jpg
这个地方调用后台程序写个图片出来就可以了.
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u414533.gif?id=31160526
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u41249.jpg
这个例子中的验证码就是一个图片,图片地址不对?
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u414533.gif?id=31160526
引用 @kimifdw
这个例子中的验证码就是一个图片,图片地址不对?
我知道只是个图片 图片地址是对的 只是<img>标签在table的外面
有图有真相不?我这没有问题啊....
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u414533.gif?id=31160526
刚才图没传上来,现在可以看到我布局了,样式怎么调?
修改width属性值
最后一节有整个Demo的源码下载。
http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u414533.gif?id=31160526
无废话ExtJs 入门教程七[登陆窗体Demo:Login]相关推荐
- 无废话ExtJs 入门教程六[按钮:Button]
无废话ExtJs 入门教程六[按钮:Button] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个按钮"提交"与重置.如下所示代码区的第6 ...
- 无废话ExtJs 入门教程十七[列表:GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(521711109) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- 无废话ExtJs 入门教程二十三[员工管理实例:Demo]
一.概况:这个实例的开发工具为 vs2010,数据库为 sql2008 r2,数据库设计pd16.以下是对文件的详细说明: 解压文件 05 ExtJs教程 夹后 会有以下3个文件夹: 00 Extjs ...
- 无废话ExtJs 入门教程十[单选组:RadioGroup、复选组:CheckBoxGroup]
继上一节内容,我们在表单里加了个一个单选组,一个复选组: 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- 无废话ExtJs 入门教程八[脚本调试Firefox:firebug]
Firebug是一个Firefox插件,功能:HTML查看和即时编辑.控制台.网络状况等,是开发JavaScript.ExtJs的得力调试工具. 一.Firefox的安装.下载地址: htt ...
- 无废话SharePoint入门教程三[创建网站集和网站]
一.前言 前两篇文章讲解了什么是SharePoint,并且介绍了在SharePoint中一些常用的概念.但概念终究是概念,我们还是要脚踏实地的去动手实践.下面的文章对于了解SharePoint的人来说 ...
- 无废话SharePoint入门教程二[SharePoint发展、工具及术语]
一.前言 1.由于上一篇文章的标题命名失误,此篇标题写给百度搜索"什么是SharePoint". 2.关于什么是SharePoint,请参见本人的第一篇文章:http://www. ...
- ExtJs 入门教程(我感觉挺好的)
ExtJs 入门教程一[学习方法] ExtJs 入门教程二[Hello World] ExtJs 入门教程三[窗体:Window组件] ExtJs 入门教程四[表单:FormPanel] ExtJs ...
- 无废话WCF系列教程 -- 李林峰
李林峰的无废话WCF入门教程 无废话WCF入门教程一[什么是WCF] 无废话WCF入门教程二[WCF应用的通信过程] 无废话WCF入门教程三[WCF的宿主] 无废话WCF入门教程四[WCF的配置文件] ...
- EXTJS入门教程及其框架搭建
EXTJS是一个兼容AJAX的前台WEB UI的框架,在普通的HTML文件的 BODY 元素中无须写任何HTML代码,就能产生相应的表格等元素. 原创不易,转载请注明出处:EXTJS入门教程及其框架搭 ...
最新文章
- 【怎样写代码】参数化类型 -- 泛型(一):泛型概述
- 20060427: 部分汉化Together Workflow Editor
- 深入浅出InfoPath——动态获取InfoPath中的命名空间
- 如何在windows上搭建mysql_如何在Windows上安装多个MySQL
- 安徽医科大学计算机考研,这所985院校将现场面试!安徽医科大学缺额超800人!调剂信息更新...
- 2012禁用ip隧道 win_Windows 7下关闭IPV6隧道的技巧方法
- php全局化标签,PHP – 在整个应用程序中使类对象全局化?
- realtek网卡mac硬改工具_浅谈设备异常、手机硬改参数
- ocp认证考试指南第一章
- 当磁盘工具无法修复磁盘时,你可以这样做!
- P2610 【[ZJOI2012]旅游】(dfs+树的直径)
- wince中实现SQLite数据库及二进制文件保存与读取
- Eclipse ADT插件版本下载大全
- Python定时任务框架APScheduler详解
- 后盾网-CI框架实例教程-马振宇 - 学习笔记(1~2)
- 国产电机驱动芯片TMI8870应用在智能马桶翻盖/翻圈上
- 生成sign(签名),以及校验工具类
- Aspose.Words 创建表格
- 【渝粤教育】电大中专学习指南作业 题库
- computer security 复习
热门文章
- 计算机专业考研英语二国家线,考研英语二国家线多少,2020年考研英语国家线多少?...
- sending data 慢SQL原因排查命令
- 进击的Libra:路在何方?中国应如何应对?
- 域名和网址链接被微信浏览器拦截怎么办 微信屏蔽网址打开如何解决
- Hive 性能调优大全
- 知乎 ”大家都见过哪些让你虎躯一震的代码?“用户“李晨昊”回答的等价代码
- Android7.0 头像 拍照、照片裁剪
- 深度 | 蚂蚁金融智能平台:让AI在金融场景发挥作用
- 2022-2028年全球与中国马铃薯淀粉生产线行业发展趋势及竞争策略研究
- RMF模型评分制计算方法(2021/08/04)