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 翻译了 ...
随机推荐
- android:windowSoftInputMode及其他部分属性用法
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 今天我们来讲讲android:windoSoftInputMode的用法,许多同学会为软键盘的弹出. ...
- 微信 关闭手机微信内置浏览器的js
WeixinJSBridge.call('closeWindow');
- 【转】Yeoman：Web 应用开发流程与工具
原文转自:http://blog.jobbole.com/62098/ 随着 Web 2.0 和 HTML 5 的流行,现在的 Web 应用所能提供的功能和交互能力比之前传统的 Web 应用要强大很多 ...
- turn.js实现翻书效果
JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...
- matlab 不要图像界面
参考文献matlab -nodesktop
- MySQL 获得当前日期时间(以及时间的转换)
1.1 获得当前日期+时间(date + time)函数:now() 除了 now() 函数能获得当前的日期时间外,MySQL 中还有下面的函数: current_timestamp() curr ...
- Sprint第二个冲刺（第三天）
一.Sprint 计划会议: 今天我们召开了第二个Sprint的第三次会议,会议上我们把各自完成的情况进行了一次总结,现在主界面和美化按钮.增添图片的功能已经完成了,Doing里面的其他 ...
- tty驱动程序框架
tty驱动程序框架 一.TTY概念解析 在Linux系统中,终端是一类字符型设备,它包括多种类型,通常使用tty来简称各种类型的终端设备. 1.1串口终端(/dev/ttyS*) 串口终端是使用计算机 ...
- hive 常见面试题
(笔者自己做记录) 1.Hive内外部表的区别删除表是否影响外部数据2.Hive如何做到权限管理hive下可以修改配置后创建用户管理,但是仅仅是为了防止误操而已,如果要真的为了安全操作建议使用 Ker ...
- kuangbin_ShortPath I (POJ 2240)
本身很简单的spfa判环 TLE了一把是因为没写map(不会) 看着别人的答案临时学了一发发现只是用的话还是挺简单的 (但是绝对别学别人直接命名为m) 800多MS水过 噢对了这题Pending到超时 ...