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 翻译了 ...
随机推荐
- Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...
- magento启用SSL改http成https
Magento是电子商务网站,对于网站的用户信息安全来说,让Magento使用SSL连接是一个很好的解决方案.如果在页面的边栏或者底部放上些表明本站使用安全连接的图片,显得更专业,让客户有安全感,对于 ...
- 第二个sprint第六天
讨论地点:qq 讨论成员:邵家文.李新.朱浩龙.陈俊金 今天完成:统计功能前期工作已经完成,暂时对它进行搁置. 开发感悟:今天回了乡下吃了一顿饭,发现还是乡下环境好,比较适合在那种环境下 ...
- 特性节点Attribute
深入理解DOM节点类型第六篇——特性节点Attribute document.getElementById('b_results').attributes[0].textContent documen ...
- 【题解】【数组】【Prefix Sums】【Codility】Genomic Range Query
A non-empty zero-indexed string S is given. String S consists of N characters from the set of upper- ...
- 如何用 freebayes call SNP
1,软件介绍 FreeBayes is a Bayesian genetic variant detector designed to find small polymorphisms, specif ...
- ubuntu 挂载优盘
不知道为什么重装一次ubuntu后无法自动挂载优盘,只好手动: sudo mount /dev/sdb1 /media/YCC_FD/ 注意,这里优盘是sdb 而非sda 查找自己优盘在什么地方,可以 ...
- 浅谈github页面域名绑定
来源:http://yanping.me/cn/blog/2011/12/04/github-pages-domain/ 前段时间看到COS上的各位都有博客,也想开个博,给COS的各位管理员发邮件,向 ...
- UI学习笔记---第八天
UINavigationController的用法 界面间传值 UInavigationController继承于UIViewController,以栈的方式管理所控制的师徒控制器,至少要有一个被 ...
- HTML ---滚动条样式代码及<marquee>标签的用法;
html中滚动条属性设置 scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overfl ...