今天，对EXT做了一下初步的了解，了解了一些基本用的函数、窗体对象、表单、文本域、按钮，一些基本的函数我列了出来，写了个登陆的demo，是根据别人的例子模仿出来的，见谅哈。

基本函数

Ext.onReady();函数： ExtJS Application的入口，相当于java的main()函数

Ext.MessageBox.alert()函数：弹出对话框
 
窗体对象
var win = new Ext.Window({});创建一个新的Window窗体对象
title:"窗口"：窗体的标题
width:111,height:111:窗体的宽度及高度
iconCls:"loginicon"：窗体标题前的图标
html:"<div>这里是窗体的内容</div>"：窗体内部显示的html内容
resizable:true:是否调整窗体的大小
modal:true:是否为模态窗体（打开这个窗体后不能对其他窗体进行操作）
closable:true:显示关闭按钮
maximizable:true:显示最大化按钮
minimizable:true:显示最小化按钮
win.show():窗体展示
plain:true:强制与背景色保持协调，默认为false
bodyStyle:与边框的间距
buttonAlign:窗体中button的对齐方式left,center,right（默认为right）
方法
show:打开窗体
hide:隐藏窗体
close:关闭窗体
事件
how:打开窗体时触法
hide:隐藏窗体时触法
close:关闭窗体时触法
 
表单（form组件）
属性
width,height:宽度及高度
url:字符串，表单提交地址
方法
reset:表单重置
isValid:表单是否验证去全部通过
submit:表单提交
 
文本框
Ext.QuickTips.init();作用是初始化标签中的Ext:Qtip属性，并赋予显示提示的动作
var txtusername = Ext.form.TextField();创建一个新的TextField文本框对象
allowBlank:false:文本框不能为空
maxLength:20:文本框最大长度为20个字符，但是超过时还是可以输入，但会出现警告
name:"password":表单名称，与服务器交互时按name接收post的参数值
fieldLabel:"用户名"：文本框前面显示的文字标题
blankText:"请输入用户名"：当非空较验没有通过时的提示信息
maxLengthText:"用户名不能超过20个字符"：当最大长度校验没有通过时的提示信息
 
按钮
var btnsubmit = new Ext.Button();创建一个新的Button按钮对象
text:"提交"：按钮上的文字
事件
handler:首发方法处理事件（是一个特殊的listener）
listeners:事件监听(事件名+处理函数)
 
登陆窗口demo
<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>登陆页面</title>

		<script type="text/javascript" src="Ext/adapter/ext/ext-base.js" ></script>

		<script type="text/javascript" src="Ext/ext-all.js" ></script>

		<link rel="stylesheet" href="Ext/resources/css/ext-all.css" />

		<style type="text/css">

			.loginicon

			{

				background-image: url(img/2012062119234296.gif) !important;

			}

		</style>

		<script>

			Ext.onReady(function(){

				Ext.QuickTips.init();

				Ext.form.Field.prototype.msgTarget = "side";

				var btnsubmitclick = function(){

					if(form.getForm().isValid()){

						Ext.MessageBox.alert("提示","登陆成功！");

					}

				}

				var btnresetclick = function(){

					form.getForm().reset();

				}

				var txtusername = new Ext.form.TextField({

					width:147,

					allowBlank:false,

					maxLength:10,

					fieldLabel:"用户名",

					blankText:"请输入用户名",

					maxLengthText:"用户名不能超过10个字符"

				});

				var txtpassword = new Ext.form.TextField({

					width:147,

					allowBlank:false,

					maxLength:10,

					name:"password",

					fieldLabel:"密码",

					blankText:"请输入密码",

					maxLengthText:"密码不能超过10个字符"

				});

				var txtcheckcode = new Ext.form.TextField({

					width:80,

					allowBlank:false,

					maxLength:4,

					fieldLabel:"验证码",

					id:"checkcode",

					blankText:"请输入验证码",

					maxLengthText:" 验证码为4个字符"

				});

				var btnsubmit = new Ext.Button({

					text:"登陆",

					handler:btnsubmitclick

				});

				var btnreset = new Ext.Button({

					text:"重置",

					handler:btnresetclick

				});

				var form = new Ext.form.FormPanel({

					url:"********",

					labelAlign:"right",

					labelWidth:45,

					cls:"loginform",

					buttonAlign:"center",

					frame:true,

					width:230,

					height:140,

					style:"margin:3px",

					html:"<div></div>",

					items:[txtusername,txtpassword,txtcheckcode],

					buttons:[btnsubmit,btnreset]

				});

				var win = new Ext.Window({

					title:"登陆窗口",

					iconCls:"loginicon",

					plain:true,

					width:250,

					height:180,

					resizable:false,

					shadow:true,

					modal:true,

					html:"<div></div>",

					closable:true,

					maximizable:true,

					minimizable:true,

					animCollapse:true,

					items:form

				});

				win.show();

				var checkcode = Ext.getDom("checkcode");

				var checkimage = Ext.get(checkcode.parentNode);

				checkimage.createChild({

					tag:"img",

					src:"img/checkcode.gif",

					align:"absbottom",

					style:"padding-left:20px;cursor:pointer;"

				});

			});

		</script>

	</head>

	<body>

	</body>

</html>

　　

 
 
 
 
 
 
 
 
 
 
    

EXT入门学习的更多相关文章

  1. Ext入门学习系列（三）复杂自定义窗体

    通过前2节的学习,基本掌握了Ext的语法和运行原理,可以作出一些简单的应用.本节我们一起来完成复杂点的对话框操作,因为在实际项目中经常要用到确认对话框等多种操作,然后根据客户的选择作出不同的响应. 一 ...

  2. Ext入门学习系列（二）弹出窗体

    第二章 弹出窗体 上节学习了Ext的环境搭建和最基本的一个操作——弹出对话框,作为一个引子,本节讲述如何弹出一个新窗体,从实例讲解Ext的基本运行原理. 一.Ext的窗体长什么样? 先来看看几个效果, ...

  3. Ext入门学习系列（四）面板控件

    第四章 使用面板 上节学习了Ext复杂对话框,更进一步了解了Ext的运行机制.本章重点来了解Ext所有控件的基础——面板控件. 一.Ext的面板是什么? 同样先来看看几个效果: 基本面板,点击右上角小 ...

  4. Ext入门学习系列（五）表格控件（3）

    上节学习了Ext中如何绑定服务器端传递的数据.分别用asp.net和asp.net MVC.PHP.XML为例.本节主要介绍绑定之后的分页功能. 一.Ext的表格控件如何绑定? 分页是Ext自带的一个 ...

  5. Ext入门学习系列（五）表格控件（2）

    上节学习了Ext中表格控件,从创建,到定义数据源.绑定显示,大体明白了一个基本的表格控件是怎么实现的.而我们用表格控件多用于从各种数据源接收数据并显示出来,并不是写死的.本章我们就不同数据源的不同实现 ...

  6. Ext入门学习系列（五）表格控件（1）

    上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...

  7. opengl入门学习

    OpenGL入门学习 说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640 ...

  8. 【Ext.Net学习笔记】02：Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局

    Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...

  9. OpenGL入门学习(转)

    OpenGL入门学习 http://www.cppblog.com/doing5552/archive/2009/01/08/71532.html 说起编程作图,大概还有很多人想起TC的#includ ...

随机推荐

  1. POJ3348：Cows——题解

    http://poj.org/problem?id=3348 题目大意:用已给出的点围出面积最大的凸包,输出面积/50(向下取整) —————————————————————————— 第一道凸包?以 ...

  2. UVA:11183:Teen Girl Squad (有向图的最小生成树)

    Teen Girl Squad Description: You are part of a group of n teenage girls armed with cellphones. You h ...

  3. D-query SPOJ - DQUERY（莫队）统计不同数的数量

    Given a sequence of n numbers a1, a2, ..., an and a number of d-queries. A d-query is a pair (i, j) ...

  4. 深度学习---tensorflow简介

    个core可以有不同的代码路径.对于反向传播算法来说,基本计算就是矩阵向量乘法,对一个向量应用激活函数这样的向量化指令,而不像在传统的代码里会有很多if-else这样的逻辑判断,所以使用GPU加速非常 ...

  5. git--------------bug修复流程

    当前所有分支: master:主分支 test:测试分支 zs:开发人员分支 ls:开发人员分支 场景:zs正在开发A模块功能,线上环境产生了一个bug. zs的操作流程(当前分支为zs分支): 1. ...

  6. JAVA 枚举单例模式

     1.枚举单例模式的实现 public enum Singleton { INSTANCE { @Override protected void read() { System.out.println ...

  7. java正则 以什么开始，以什么结束

    public class RegTest { public static void main(String[] args){ String regex = "\\[([\\s\\S]*?)\ ...

  8. 线程阶段性总结——APM，ThreadPool，Task，TaskScheduler ，CancellationTokenSource

    不管我们使用thread,threadPool,task,还是APM异步,本质都是在使用多线程.对于新手来说,不太敢用多线程的原因,就我个人的体验来说,就是对多线程的异常捕获方式或时机缺乏了解,而一旦 ...

  9. vue-transition-animation

    <!Doctype> <html> <head> <meta charset="utf-8"> <meta name=&quo ...

  10. iBATIS事务处理

    一:问题 最近发现了我们自己的项目的事务的处理根本就是行不通的,也因此我自己又去看了下有关事务的处理,算是有了个大致的了解吧,先说说我们最初的配置吧. 二:内容 (1):使用iBatis的事务管理 S ...