从零开始学习ExtJs6系列教程三【登录Demo:Login】
来源:互联网 发布:朱高炽 知乎 编辑:程序博客网 时间:2024/06/05 20:15
在这节我们通过前几节讲的内容做一个登陆页面.
login.js
Ext.onReady(function() { // 初始化标签中的Ext:Qtip属性。 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; // 提交按钮处理方法 var btnsubmitclick = function() { if (form.getForm().isValid()) { // 通常发送到服务器端获取返回值再进行处理,我们在以后的教程中再讲解表单与服务器的交互问题。 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 : 140, allowBlank : false, maxLength : 20, name : 'username', fieldLabel : '用户名', blankText : '请输入用户名', maxLengthText : '用户名不能超过20个字符' }); // 密码input var txtpassword = new Ext.form.TextField({ width : 140, allowBlank : false, maxLength : 20, inputType : 'password', name : 'password', fieldLabel : '密 码', blankText : '请输入密码', maxLengthText : '密码不能超过20个字符' }); // 验证码input var txtcheckcode = new Ext.form.TextField({ fieldLabel : '验证码', id : 'checkcode', allowBlank : false, width : 76, blankText : '请输入验证码!', maxLength : 4, maxLengthText : '验证码不能超过4个字符!' }); // 表单 var form = new Ext.form.FormPanel({ url : '******', labelAlign : 'right', labelWidth : 45, frame : true, cls : 'loginform', buttonAlign : 'center', bodyStyle : 'padding:6px 0px 0px 15px', items : [ txtusername, txtpassword, txtcheckcode ], buttons : [ btnsubmit, btnreset ] }); // 窗体 var win = new Ext.Window({ title : '用户登陆', iconCls : 'loginicon', plain : true, width : 276, height : 174, resizable : false, shadow : true, modal : true, closable : false, animCollapse : true, items : form }); win.show(); // 创建验证码 var checkcode = Ext.getDom('checkcode'); var checkimage = Ext.get(checkcode.parentNode); checkimage.createChild({ tag : 'img', src : 'xxxxxx', align : 'absbottom', style : 'padding-left:23px;cursor:pointer;' });});
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <title>登录</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- 引入ExtJs样式 --> <link rel="stylesheet" type="text/css" href="<%=basePath %>static/ext-6.0.0.415/build/classic/theme-neptune/resources/theme-neptune-all.css"> <!-- 引入ExtJs核心Js --> <script type="text/javascript" src="<%=basePath %>static/ext-6.0.0.415/ext-bootstrap.js"></script> <script type="text/javascript" src="<%=basePath %>static/ext-6.0.0.415/build/ext-all.js"></script> <script type="text/javascript" src="<%=basePath %>static/ext-6.0.0.415/build/classic/locale/locale-zh_CN.js"></script> <!-- 页面Js --> <script type="text/javascript" src="<%=basePath %>static/js/login.js"></script> </head> <body> </body></html>
表单:FormPanel 说明:
(1)var form = new Ext.form.FormPanel({}):创建一个新的form表单对象。
(2)title: ‘表单标题’:表单的标题,如果不加的话,不会出现上面的浅色表单标题栏。
(3)style: ‘margin:10px’:表单的样式,加了个外10px的外边距。
(4)html: ‘<div style="padding:10px">这里表单内容</div>
‘:表单内显示html的内容。
form 组件常用的:属性、方法及事件
一、属性
width:整型,表单宽度。
height:整型,表单高度。
url:字符串,表单提交地址。
二、方法
reset:表单重置。
isValid:表单是否验证全部通过。
submit:表单提交。
文本框:TextField 说明:
(1)Ext.QuickTips.init():QuickTips的作用是初始化标签中的Ext:Qtip属性,并为它赋予显示提示的动作。
(2)Ext.form.Field.prototype.msgTarget = ‘side’:TextField的提示方式为:在右边缘,如上图所示,参数枚举值为”qtip”,”title”,”under”,”side”,id(元素id),side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示。
(3)var txtusername = new Ext.form.TextField():创建一个新的TextField文本框对象。
(4)allowBlank: false:不允许文本框为空。
(5)maxLength: 20:文本框的最大长度为20个字符,当超过20个字符时仍然可以继续输入,但是Ext会提示警告信息。
(6)name: ‘password’:表单名称,这个比较重要,因为我们在与服务器交互的时候,服务端是按name接收post的参数值。
(7)fieldLabel: ‘用户名’:文本框前面显示的文字标题,如“用户名”,“密码”等。
(8)blankText: ‘请输入用户名’:当非空校验没有通过时的提示信息。
(9) maxLengthText: ‘用户不能超过20个字符’:当最大长度校验没有通过时的提示信息。
textfield组件常用的:属性、方法及事件
一、属性
allowBlank:是否允许为空,默认为true
blankText:空验证失败后显示的提示信息
emptyText:在一个空字段中默认显示的信息
grow:字段是否自动伸展和收缩,默认为false
growMin:收缩的最小宽度
growMax:伸展的最大宽度
inputType:字段类型:默认为text
maskRe:用于过滤不匹配字符输入的正则表达式
maxLength:字段允许输入的最大长度
maxLengthText:最大长度验证失败后显示的提示信息
minLength:字段允许输入的最小长度
minLengthText:最小长度验证失败后显示的提示信息
按钮:Button 说明:
(1)var btnsubmit = new Ext.Button():创建一个新的Button按钮对象。
(2)handler: btnsubmitclick:当用户点击的时候[即js中的onclick事件]执行方法btnsubmitclick。
(3)listeners: {‘mouseover’: btnresetmouseover,’click’: btnresetclick}:当用户点击的时候[即js中的onclick事件]执行方法btnresetclick,鼠标悬停时执行方法btnresetmouseover。
(4)handler与listeners的区别:
handler:执行的是首发事件,click是button这个组件的首发事件。这就是handler的运行方式:被某个组件的首要event所触发。 handler是一个特殊的listener。
listener:是一个事件名 + 处理函数的组合,事件监听,如上例代码所示,我们监听了两个事件”click”,与”mouseover”事件,并且会顺序执行。
button组件常用的:属性、方法及事件
一、属性
text:字符串,显示在按钮上的文字。
minWidth: 整型,最小宽度。
二、事件
handler:首发方法处理事件。
listeners:事件监听。
- 从零开始学习ExtJs6系列教程三【登录Demo:Login】
- 从零开始学习ExtJs6系列教程一【Hello World】
- 从零开始学习ExtJs6系列教程二【窗体Window组件】
- ExtJs6学习(三)【DOM操作】
- 正则表达式从零开始学习系列(三)
- Drupal7的User Login用户登录教程
- 【工作笔记】从零开始学ExtJs6(二)——登录模块
- 【工作笔记】从零开始学ExtJs6(二)——登录模块
- 从零开始学习GitHub系列
- C++从零开始系列教程目录
- 从零开始学习Openwrt教程
- 从零开始学习Openwrt教程
- Flask-login 简单 Demo, 最简单的实现登录方法
- 【工作笔记】从零开始学ExtJs6(三)—— 首页搭建
- 【工作笔记】从零开始学ExtJs6(三)—— 首页搭建
- [ExtJS6学习笔记]Ext JS6主题系列 (Classic工具包)
- 从零开始学习jQuery (三)
- 从零开始学习Vue(三)
- UITabBarController使用详解
- java web项目与oracle rac连接JNDI
- Android触摸事件分发之View篇
- iOS开发UI篇—UITabBarController简单介绍
- HDU 2006 求奇数的乘积(水题)
- 从零开始学习ExtJs6系列教程三【登录Demo:Login】
- cacti安装记录 第四阶段cacti的基本使用(3)setting and thresholds (邮件和阀值报警)
- Cannot change network to bridged: There are no un-bridged host network adapters解决方法
- python numpy包的数组与矩阵一些差异
- .NSKernAttribute
- HDU 5610 Baby Ming and Weight lifting(枚举)
- 将数据库中一张表中数据复制到另一张表
- 初学java集合-map—API
- SQL UPDATE 语句