今天，对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. BZOJ1229 & 洛谷2917：[USACO2008 NOV]toy 玩具 & 洛谷4480：[BJWC2018]餐巾计划问题——题解

    标题很长emmm…… [USACO2008 NOV]toy 玩具 https://www.luogu.org/problemnew/show/P2917 https://www.lydsy.com/J ...

  2. [Leetcode] search in rotated sorted array 搜索旋转有序数组

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e.,0 1 2 4 5 6 7might ...

  3. 洛谷 P1966 火柴排队 解题报告

    P1966 火柴排队 题目描述 涵涵有两盒火柴,每盒装有 \(n\) 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之间的距离定义为: \(\s ...

  4. CodeForces.5A Chat Server's Outgoing Traffic

    Chat Server's Outgoing Traffic 点我挑战提目 考察点 模拟 字符串 Time Mem Len Lang 30 0 543 c++ 题意分析 给出类似一个群的即时通讯系统, ...

  5. 基础dp例题整理

    背包: 消失之物 先直接做一遍,必然对于i,有 for(j=m;j>=w[i];--j) f[i]+=f[i-w[i]] 所以,如果排除用i做背包的结果,减去这个转移就好了. memcpy(g, ...

  6. 爬虫实例——爬取淘女郎相册（通过selenium、PhantomJS、BeautifulSoup爬取）

    环境 操作系统:CentOS 6.7 32-bit Python版本:2.6.6 第三方插件 selenium PhantomJS BeautifulSoup 代码 # -*- coding: utf ...

  7. ACE日志系统

    引用于:http://blog.csdn.net/focusonace/article/details/3108873 http://peirenlei.iteye.com/blog/305036 介 ...

  8. Codeforces Round #345 (Div. 2) C （multiset+pair ）

    C. Watchmen time limit per test 3 seconds memory limit per test 256 megabytes input standard input o ...

  9. tcpdump抓取ftp密码

    步骤: 1.登陆ftp服务器,执行命令: tcpdump -i wlan0 -w password.bin -c 500 port 21 2.有人登陆后,执行: tcpdump -v -XX -r p ...

  10. Codeforces Round #398 (Div. 2) B,C

    B. The Queue time limit per test 1 second memory limit per test 256 megabytes input standard input o ...