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