今天，对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. 在Windows*上编译Tensorflow教程

    背景介绍 最简单的 Tensorflow 的安装方法是在 pip 一键式安装官方预编译好的包 pip install tensorflow 通常这种预编译的包的编译参数选择是为了最大兼容性而不是为了最 ...

  2. CF939E：Maximize! ——题解

    http://codeforces.com/problemset/problem/939/E https://vjudge.net/problem/CodeForces-939E 给一个集合,每次两个 ...

  3. IDEA中使用Docker: 图形化 or 命令行 ，你更稀罕那个？？

    Docker简介: Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. 容器是完全使用沙箱机 ...

  4. H5背景音乐自动播放(兼容微信IOS，进程后台切换自动停止播放，本文例子为Vue写法)

    <template> <audio src="./static/music.mp3" id="bgMusic" preload="a ...

  5. 理解LINUX LOAD AVERAGE的误区

    一直不解,为什么io占用较高时,系统负载也会变高,偶遇此文,终解吾惑. uptime和top等命令都可以看到load average指标,从左至右三个数字分别表示1分钟.5分钟.15分钟的load a ...

  6. Application Error - The connection to the server was unsuccessful. (file:///android_asset/www/index.html)

    问题描述: PhoneGap+Sencha Touch开发的应用,打包后的APP或者调试期间,在启动的时候提示如下信息: Application Error - The connection to t ...

  7. select和epoll概念

    关于linux的I/O复用接口select和epoll,下列说法错误的是() select调用时会进行线性遍历,epoll采用回调函数机制,不需要线性遍历 select的最大连接数为FD_SETSIZ ...

  8. bzoj 1132 [POI2008]Tro 几何

    [POI2008]Tro Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 1796  Solved: 604[Submit][Status][Discu ...

  9. [洛谷P3761] [TJOI2017]城市

    洛谷题目链接:[TJOI2017]城市 题目描述 从加里敦大学城市规划专业毕业的小明来到了一个地区城市规划局工作.这个地区一共有ri座城市,<-1条高速公路,保证了任意两运城市之间都可以通过高速 ...

  10. Maven -- 在进行war打包时用正式环境的配置覆盖开发环境的配置

    我们的配置文件一般都放在  src/main/resource 目录下. 假定我们的正式环境配置放在 src/main/online-resource 目录下. 那么打成war包时,我们希望用onli ...