ExtJs学习笔记之学习小结LoginDemo
ExtJs学习小结LoginDemo
1、示例：（登录界面）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-js-4.2.1/ext-all.js"></script>
<script type="text/javascript" src="../ext-js-4.2.1/locale/ext-lang-zh_CN.js"></script>
<style type="text/css">
.loginicon
{
background-image: url(image/login.gif) !important;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
//初始化标签中的Ext:Qtip属性
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side'; //提交按钮点击事件
var btnsubmitclick = function(){
if(form.getForm().isValid()){
//通常发送到服务器端获取返回值再进行处理，我们在以后的教程中再讲解表单与服务器的交互问题。
Ext.Msg.alert('提示','登录成功');
}else{
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 : 240,
allowBlank : false,
maxLength : 20,
name : 'username',
fieldLabel : '用户名称',
blankText : '请输入用户名',
maxLengthText : '用户名输入不能超过20个字符'
});
//密码input
var txtpwd = new Ext.form.TextField({
width : 240,
allowBlank : false,
maxLength : 20,
name : 'password',
inputType : 'password',
fieldLabel : '密码',
blankText : '请输入密码',
maxLengthText : '密码输入不能超过20个字符'
});
//验证码input
var txtcheckcode = new Ext.form.TextField({
fieldLabel : '验证码',
id : 'checkcode',
allowBlank : false,
width : 176,
blankText : '请输入验证码',
maxLength : 4,
maxLengthText : '验证码不能超过四个字符!'
}); var form = new Ext.form.FormPanel({
frame : true,
// url : '***',
labelAlign : 'right',
labelWidth : 45,
// cls : 'loginform',
buttonAlign : 'center',
bodyStyle : 'padding:6px 0px 0px 15px',
items : [txtusername,txtpwd,txtcheckcode],
buttons : [btnsubmit,btnreset]
}); var win = new Ext.Window({
title : '用户登录',
iconCls : 'loginicon',
plain : true,
width : 300,
height : 200,
resizable : false,
shadow : true,
modal : true,
closable : true,
animCollapse : true,
items : form
});
win.show();
//创建验证码
var checkcode = Ext.getDom('checkcode');
var checkimage = Ext.get(checkcode.parentNode);
checkimage.createChild({
tag : 'img',
src : 'image/checkcode.gif'
,style : 'padding-left:23px;cursor:pointer;'
});
});
</script>
</head>
<body>
<!--
说明：
(1)iconCls: 'loginicon':给窗体加上小图标，样式在style中定义。
(2)Ext.getDom('checkcode')：根据ID获取Dom。
(3)Ext.get(checkcode.parentNode)：根据Dom获取父节点。
(4)checkimage.createChild()：创建子节点，标签为<img src='image/checkcode.gif'..../>。
(5)form.getForm().isValid()：校验表单的验证项是否全部通过。
(6)form.getForm().reset()：重置表单。
-->
</body>
</html>
2、效果图：
【说明：这个地方有两个地方有问题：(1)输入项前面的字体我设置的是右对齐，但是显示的左对齐 (2)下面的验证码图片应该是在验证码输入框右边的，结果却跑到下面去了。由于刚接触这个东西，不太了解，还望高手看到后能给解答一下，万分感谢！！！】
3、图片下载：
登录标题上的图标
验证码图标
ExtJs学习笔记之学习小结LoginDemo的更多相关文章
- java JDK8 学习笔记——助教学习博客汇总
java JDK8 学习笔记——助教学习博客汇总 1-6章 (by肖昱) Java学习笔记第一章——Java平台概论 Java学习笔记第二章——从JDK到IDEJava学习笔记第三章——基础语法Jav ...
- python3.4学习笔记(七) 学习网站博客推荐
python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...
- 20155234 2016-2017-2第十周《Java学习笔记》学习总结
20155234第十周<Java学习笔记>学习总结 教材学习内容总结 网络编程 在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定 ...
- 20155234 2610-2017-2第九周《Java学习笔记》学习总结
20155234第九周<Java学习笔记>学习总结 教材学习内容总结 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JDBC(Ja ...
- #学习笔记#e2e学习使用（二）
前言: <#学习笔记#e2e学习使用(一)>主要记录了Vue项目的创建到e2e环境的搭建,以及期间遇到的各种问题和解决方法.本文建立在基础测试环境搭建完毕能正确运行的情况下,编写测试代码, ...
- #学习笔记#e2e学习使用（一）
本文仅限于记录本人学习的过程,以及怎么踩的坑,是如何解决的.逻辑肯定是混乱的,有用之处会抽出共通另行发帖. 最终目标:要运用于Vue项目中,进行功能测试甚至自动化测试. 一.e2e概念 理解:end ...
- mybatis学习笔记之学习目录（1）
mybatis学习笔记之学习结构(1) 学习结构: 1.mybatis开发方法 原始dao开发方法(程序需要编写dao接口和dao实现类) mybatis的mapper接口(相当于dao接口)代理开发 ...
- Vue学习笔记-rest_framework_jwt 学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- Adaptive AUTOSAR 学习笔记 8 - 干货小结：背景、技术、特征、架构、方法论和 Manifest
官方文档下载方式及介绍情参见 Adaptive AUTOSAR 学习笔记 2 - 官方文档下载及阅读建议. 这是 Adaptive AUTOSAR 学习笔记的第 8 篇,学习笔记 3 - 7 翻译了 ...
随机推荐
- Linux iptables重启后失效
解决办法如下: 输入完iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080 后 执行iptables-s ...
- Java 集合深入理解（11）：LinkedList
点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情鱼肚白,来学学 LinkedList 吧! 日常开发中,保存一组数据使用的最多的就是 ArrayList, 其次就 ...
- 【转】SQL SERVER日志满或过大的处理方法
原文转自:http://blog.chinaunix.net/uid-7953959-id-2543262.html 事务日志文件Transaction Log File是用来记录数据库更新情况的文件 ...
- LeetCode Combination Sum II （DFS）
题意: 在集合candidates中选出任意多个元素,使得他们的和为target,返回所有的组合,以升序排列. 思路: 难点在于如何去重,比如集合{1,1,2},target=3,那么只有一个组合就是 ...
- dede的pagelist标签的listsize数字属性详解(借鉴)
dede的pagelist标签的listsize数字属性详解.见远seo经常用织梦搭建各种网站,有次发现列表页面的分页显示超过div的界限,也就是溢出了或者说是撑破了.后来经过研究发现是pagelis ...
- archlinux安装图形界面
安装xorg 检查显卡驱动 $ lspci | grep VGA install X server wiki Then use the $ startx to start the X server, ...
- addcontentView之后如何让这个view消失掉
Dia dialog ; public void go(View view){ dialog = (Dia) getLayoutInflater().inflate(R.layout.main, nu ...
- POJ 1502 MPI Maelstrom
MPI Maelstrom Time Limit : 2000/1000ms (Java/Other) Memory Limit : 20000/10000K (Java/Other) Total ...
- WebRTC录音(2)-录音文件转换成WAV格式
以下是源码,大路货,从网上找的. 但是,这个东西在MacOS上是有问题的,原因在最后,都是泪啊. #include <stdio.h> #include <string.h> ...
- 关于JSP的C标签之forEach循环分隔符
页面中可能说出现在forEach循环中间需要出力分隔符的问题, 比如: 小明 1年级,小王 2年级, 小张 3年级(循环单位是 ${bean.name} ${bean.class}) 此时的逗号出力, ...