今天，对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. [CF1095F]Make It Connected

    题目大意:给你$n(n\leqslant2\times10^5)$个点和$m(m\leqslant2\times10^5)$条边,第$i$个点点权为$a_i$.连接$u,v$两个点的代价为$a_u+a ...

  2. BZO4197 & 洛谷2150 & UOJ129：[NOI2015]寿司晚宴——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4197 https://www.luogu.org/problemnew/show/P2150 ht ...

  3. C++中数组和vector

    本文基于邓俊辉编著<数据结构(C++语言版)(第3版)>.<C++ Primer(第5版)>以及网上的相关博文而写,博主水平有限,若有不妥处,欢迎指出. 一.数组 C++中数组 ...

  4. react事件机制

    1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...

  5. 爬虫实例——爬取煎蛋网OOXX频道（反反爬虫——伪装成浏览器）

    煎蛋网在反爬虫方面做了不少工作,无法通过正常的方式爬取,比如用下面这段代码爬取无法得到我们想要的源代码. import requests url = 'http://jandan.net/ooxx' ...

  6. Codeforces Round #532 (Div. 2)：F. Ivan and Burgers（贪心+异或基）

    F. Ivan and Burgers 题目链接:https://codeforces.com/contest/1100/problem/F 题意: 给出n个数,然后有多个询问,每次回答询问所给出的区 ...

  7. [sed]记录

    sed的括号本身没有特殊意义,如果要保留通配内容,需要转义. echo "1) host" |sed  's/1) ([a-z])/$1) $1/' 有两处有问题. 1. 首先是上 ...

  8. Python爬虫学习笔记之点触验证码的识别

    代码: Chaojiying.py: #!/usr/bin/env python # coding:utf-8 import requests from hashlib import md5 clas ...

  9. Maven -- 将引用的本地jar文件打进war包里

    我们在做maven项目开发中有时候引用了本地第三方包,例如: <dependency> <groupId>org.artofsolving.jodconverter</g ...

  10. centos6.8使用脚本一键搭建apache+svn服务

    服务器环境: 脚本如下: #!/bin/bash yum install wget -y mv /etc/yum.repos.d/*.repo /tmp wget -O /etc/yum.repos. ...