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 翻译了 ...
随机推荐
- FATE_完全背包
ps:原来用新浪,可是代码的排版不是很好,所以用博客园啦,先容许我把从八月份开始的代码搬过来,从这里重新出发,希望这里可以一直见证我的成长. Time Limit: 2000/1000 MS (Jav ...
- 为什么要urlencode
为什么要urlencode 1.为了正常获取值 字符 特殊字符的含义 URL编码 & 分隔不同的变量值对 %26 = 用来连接键和值 %3D ? 表示查询字符串的开始 %3F # 用来标志 ...
- 【转】终于干了点正事。。三天用了三个库opencv、emgu、aforge.net[2011.7.30]
原文转自: http://blog.csdn.net/tutuguaiguai0427/article/details/6646051 这阵子,确切说这几天,还是看了好多东西的.虽然无用功居多. 上篇 ...
- [转]Golang－ import 导入包的语法
http://blog.csdn.net/zhangzhebjut/article/details/25564457 一 包的导入语法 在写Go代码的时候经常用到import这个命令用来导入 ...
- 转：UniqueID和ClientID的来源
转:http://www.cnblogs.com/GrayZhang/archive/2009/03/05/how-uniqueid-is-generated.html 在<漫话ID>一文 ...
- python学习：猜数字小游戏
在学习python过程中,没有项目做,就想到哪儿弄到哪儿. 头一发.让机器随机固定一个数字,然后让人去猜. 就这么简单.代码如下: #-*- encoding:utf8 -*- import rand ...
- Core Data入门
简介 Core Data是iOS5之后才出现的一个框架,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数据库中的数据还原成OC对象. ...
- 六个超大规模Hadoop（前景）
http://cloud.zol.com.cn/441/4415033_all.html 希望自己可以尽快把Hadoop学好
- python 函数基础
定义: def intersect(seq1,seq2): res = [] for x in seq1: if x in seq2: res.append(x) yield res 运行效果 > ...
- JS初学之-if else图片顺序及循环切换
初学JS,代码还需多多改进,自学中... <!doctype html><html><head><meta charset="utf-8" ...