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 翻译了 ...
随机推荐
- 破解 abexcrackme2
系统 : Windows xp 程序 : abexcrackme2 程序下载地址 :http://pan.baidu.com/s/1qXhyt8C 要求 : 注册机编写 使用工具 : OD 可在“PE ...
- mysql联合索引详解
联合索引又叫复合索引.对于复合索引:Mysql从左到右的使用索引中的字段,一个查询可以只使用索 引中的一部份,但只能是最左侧部分.例如索引是key index (a,b,c). 可以支持a | a,b ...
- CSS 实现：图片+文字的布局（综合）
☊[实现要求]:图片+文字+居中 √[实现]: ① img + 文字 <div class="demo2-1"> <img src="" al ...
- ML2 – Address Population
Why do we need it, whatever it is? VM unicast, multicast and broadcast traffic flow is detailed in m ...
- PAT (Basic Level) Practise：1017. A除以B
[题目链接] 本题要求计算A/B,其中A是不超过1000位的正整数,B是1位正整数.你需要输出商数Q和余数R,使得A = B * Q + R成立. 输入格式: 输入在1行中依次给出A和B,中间以1空格 ...
- Linux档案与目录的管理
本篇随笔中,主要介绍在Linux环境下,与档案和目录的管理相关的一些命令使用,具体包括如下几个方面: 目录的相关操作:cd,pwd,mkdir,rmdir(rm) 档案与目录的查视:ls 复制.删除与 ...
- flexbox的术语
在详细阅读这篇文章之前,我们很有必要先了解flexbox的几个常用术语,这样有助于大家对后文的理解. 伸缩容器:一个设有“display:flex”或“display:inline-flex”的元素 ...
- CrossApp 0.3.1示例编译问题解决过程
1 AlertTest.h找不到 问题成因:HelloCpp工程中头文件搜索路径没有增加Classes目录,需要自己加进去.(另外由于这些文件都是在子目录中,用递归模式也行,逐个子目录添加也行) 2 ...
- Matlab GUI设计中的一些常用函数
Matlab GUI常用函数总结 % — 文件的打开.读取和关闭% — 文件的保存% — 创建一个进度条% — 在名为display的axes显示图像,然后关闭% — 把数字转化为时间格式% — ch ...
- jq hover方法用法 例子
<script type="text/javascript"> $(function(){ $('.caseslist').hover(functi ...