今天，对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>
