今天，对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. [luogu3806]【模板】点分治1

    description 求树上长度为\(k\)的路径是否存在. data range \[n\le 10000,k\le 10000000\] solution 点分治复习... 使用普通的点分治枚举 ...

  2. POJ1279：Art Gallery——题解

    http://poj.org/problem?id=1279 题目大意:给按照顺时针序的多边形顶点,问其内核可行区域面积. —————————————————————————————— 终于变了一点… ...

  3. [LNOI] 相逢是问候 || 扩展欧拉函数+线段树

    原题为2017六省联考的D1T3 给出一个序列,m次操作,模数p和参数c 操作分为两种: 1.将[l,r]区间内的每个数x变为\(c^x\) 2.求[l,r]区间内数的和%p 首先,我们要了解一些数论 ...

  4. LibreOJ #6221. 幂数 ！（数论+dfs+剪枝）

    写新题然后艹翻标程的感觉真是舒爽啊... 这题就是个dfs...先预处理出sqrt(n)范围内的素数,然后dfs构造合法的数就行了. 直接暴搜会TLE,需要剪一剪枝,不需要跑到最后一层再计算答案,边构 ...

  5. BZOJ1509 NOI2003 逃学的小孩

    Description: Input: 第一行是两个整数N(3  N  200000)和M,分别表示居住点总数和街道总数.以下M行,每行给出一条街道的信息.第i+1行包含整数Ui.Vi.Ti(1 ...

  6. Linux之poll与select20160619

    使用非阻塞I/O的应用程序通常会使用select()和poll()系统调用查询是否可对设备进行无阻塞的访问,这两个系统调用最终又会引发设备驱动中的poll()函数被执行 如果当前不可读(先调用驱动.p ...

  7. 使用 Rational AppScan 保证 Web 应用的安全性，第 1 部分: Web 安全与 Rational AppScan 入门

    前言 当今世界,Internet(因特网)已经成为一个非常重要的基础平台,很多企业都将应用架设在该平台上,为客户提供更为方便.快捷的服务支持.这些应用 在功能和性能上,都在不断的完善和提高,然而在非常 ...

  8. ASP.NET创建三层架构图解详细教程

    1.新建项目 2.创建Visual Studio解决方案 3.再创建项目 4.选择类库类型 5.依次创建bll(业务逻辑层),dal(数据访问层)和model(模型层也可以叫实体层) 6.添加一个网站 ...

  9. 在IIS中寄存服务

    http://blog.csdn.net/songyefei/article/details/7381595 第三篇 在IIS中寄宿服务 通过前两篇的学习,我们了解了如何搭建一个最简单的WCF通信模型 ...

  10. LightOJ 1140 计数/数位DP 入门

    题意: 给出a,b求区间a,b内写下过多少个零 题解:计数问题一般都会牵扯到数位DP,DP我写的少,这道当作入门了,DFS写法有固定的模板可套用 dp[p][count] 代表在p位 且前面出现过co ...