一：Ext.Window類
二：Ext.Window類實例
三：Ext.FormPanel類
四：Ext.FormPanel類實例
1.類
Ext.Window
包： Ext 定義的文件
Window.js 類全稱：
Ext.Window 繼承自於：
Ext.Panel
說明： 一種專用於程序中的“視窗”（window）的特殊面板。Window默認下是可拖動的
draggable、浮動的窗體。窗體可以最大化到整個視圖、恢復原來的大小，還可以最小化
minimize。
Windows既可關聯到 Ext.WindowGroup或籍由 Ext.WindowManager來管理， 提供分組（grouping），活動（activation），置前/置后（to front/back）或其它應用程序特定的功能。
缺省狀態下，窗體都渲染到document.body。要強制 constrain窗體以某個元素為依托就要使用 renderTo方法。
2.例：
//html代碼
<div id="win" class="x-hidden"></div>
<div id="win" class="x-hidden"></div>
//js代碼
var w=new Ext.Window({
el:"win",//主體顯示的html元素
var w=new Ext.Window({
el:"win",//主體顯示的html元素
width:300,
height:200,
title:"標題"
});
w.show();
3.參數介紹：
因為前面已經介紹了panel組件，下面只介紹window組件的幾個其他特別的配置參數
//幾個前面沒有介紹的window自己的配置參數
1.closeAction:枚舉值為：
1.closeAction:枚舉值為：
close(默認值)，當點擊關閉后，關閉window窗口
hide,關閉后，只是hidden窗口
2.closable:true在右上角顯示小叉叉的關閉按鈕，默認為true
3.constrain：true則強制此window控制在viewport，默認為false
4.modal:true為模式窗口，后面的內容都不能操作，默認為false
5.plain：//true則主體背景透明，false則主體有小差別的背景色，默認為false
//需要顯示下show（）方法,默認的窗口是可拖動的，可關閉的，可拖動大小的
w.show（）
w.show（）
4.實例介紹
}),
plain:true,//true則主體背景透明，false則主體有小差別的背景色，默認為false
title:"標題"
});
w.show();
1.嵌套了tabpanel的window
var w=new Ext.Window({
contentEl:"win",
width:300,
height:200,
contentEl:"win",
width:300,
height:200,
el：“win”，
minimizable：true， //最小化
maximizable：true， //最大化
items:new Ext.TabPanel({
activeTab:0,//當前標簽為第1個tab（從0開始索引） 設置選項卡的激活狀態
border:false,
items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口中"}]//TabPanel中的標簽頁，以后再深入討論
items:new Ext.TabPanel({
activeTab:0,//當前標簽為第1個tab（從0開始索引） 設置選項卡的激活狀態
border:false,
items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口中"}]//TabPanel中的標簽頁，以后再深入討論
}),
plain:true,//true則主體背景透明，false則主體有小差別的背景色，默認為false
title:"標題"
});
w.show();
2.添加工具欄
// bbar:[{text:“確定”},{text:“取消”,handler:function(){w.close();}}],//bottom部
buttons:[{text:“確定”},{text:“取消”,handler:function(){w.close();}}],//footer部
buttonAlign:“center”,//footer部按鈕排列位置,這里是中間
// collapsible:true,//右上角的收縮按鈕
buttons:[{text:“確定”},{text:“取消”,handler:function(){w.close();}}],//footer部
buttonAlign:“center”,//footer部按鈕排列位置,這里是中間
// collapsible:true,//右上角的收縮按鈕
其他與Panel一樣！
二：
FormPanel
包：Extform 定義的文件： Form.js
類全稱：
Ext.form.FormPanel
繼承自於：
Ext.Panel
//查看源代碼便知，兩種方法是一樣的
Ext.form.FormPanel = Ext.FormPanel;
Ext.form.FormPanel = Ext.FormPanel;
1.實例：
<!--html代碼-->
<body>
<div id="form1"></div>
</body>
<body>
<div id="form1"></div>
</body>
}//js代碼
var form1 = new Ext.form.FormPanel({
width:350,
frame:true,//圓角和淺藍色背景
renderTo:"form1",//呈現
var form1 = new Ext.form.FormPanel({
width:350,
frame:true,//圓角和淺藍色背景
renderTo:"form1",//呈現
defaults：{xtype：“textfield”，width：200}，
title:"FormPanel",
bodyStyle:"padding:5px 5px 0", //邊距
title:"FormPanel",
bodyStyle:"padding:5px 5px 0", //邊距
items:[
{
fieldLabel:"UserName",//文本框標題
// xtype:"textfield",//表單文本框
name:"user",
id:"user",
// width:200
},
fieldLabel:"UserName",//文本框標題
// xtype:"textfield",//表單文本框
name:"user",
id:"user",
// width:200
},
{
fieldLabel:"PassWord",
// xtype:"textfield",
fieldLabel:"PassWord",
// xtype:"textfield",
inputType：“password”，//密碼顯示
name:"pass",
id:"pass",
// width:200
}
],
name:"pass",
id:"pass",
// width:200
}
],
buttonAlign：“center”，
buttons:[{text:"確定"},{text:"取消",handler:function(){alert("事件！");}}]
});
buttons:[{text:"確定"},{text:"取消",handler:function(){alert("事件！");}}]
});
關於inputType,參數如下：
//input的常用幾種類型
radio
check
text(默認)
file
password等等
check
text(默認)
file
password等等
關於FormPanel的配置參數，請主要參考panel的參數，這里列舉另外兩個：
1.labelAlign:fieldlabel的排列位置，默認為"left"，其他兩個枚舉值是"center","right"
2.labelWidth:fieldlabel的占位寬
3.method:"get"或"post"
4.url："提交的地址"
5.submit:提交函數
實例2.FormPanel的fieldset應用
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var frmLogin = new Ext.form.FormPanel({
title: "登錄",
width: 350,
frame: true,
bodyStyle:"padding:10px 10px 0 0",
renderTo: "contaner",
items:[{
xtype:"fieldset",
title: '個人信息',
collapsible: true,
autoHeight:true,
width:330,
defaults: { width: 150 },
defaultType: "textfield",
items:[
{
fieldLabel: '愛好',
name: 'hobby',
value: '上網、打游戲'
},
{
xtype:"combo",
name:"sex",
store:["男","女","保密"],
fieldLabel:"性別",
emptyText:"請選擇性別"
}
]
}],
buttonAlign:"center",
buttons: [{ text: "登錄" }, { text: "退出", handler: function() { frmLogin.hide(); } }]
});
});
</script>
</head>
<body>
<div id="contaner"></div>
</body>
</html>
關於xtype的類型，在extjs的form表單（其他的請參考api）中已經定義的有：
Form components
---------------------------------------
form Ext.FormPanel
checkbox Ext.form.Checkbox
combo Ext.form.ComboBox
datefield Ext.form.DateField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
---------------------------------------
form Ext.FormPanel
checkbox Ext.form.Checkbox
combo Ext.form.ComboBox
datefield Ext.form.DateField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
實例3:可選的fieldset實例
1.checkboxToggle:true//true則呈現一個帶checkbox的fieldset，選中則展開，否則相反，默認為false
2.checkboxName:string//當上面為true時，作為checkbox的name，方便表單操作
2.checkboxName:string//當上面為true時，作為checkbox的name，方便表單操作
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init(); //支持tips提示
Ext.form.Field.prototype.msgTarget = 'side'; //提示的方式
Ext.apply(Ext.form.VTypes, {
password: function(val, field) {
if (field.confirmTo) {
var pwd = Ext.get(field.confirmTo);
return (val == pwd.getValue());
}
return true;
}
});
var frmLogin = new Ext.form.FormPanel({
title: "登錄",
width: 350,
frame: true,
bodyStyle: "padding:10px 10px 0 0",
renderTo: "contaner",
items: [{
xtype: "fieldset",
title: '個人信息',
collapsible: true,
autoHeight: true,
width: 330,
defaults: { width: 150 },
defaultType: "textfield",
items: [
{
fieldLabel: '愛好',
name: 'hobby',
value: '上網、打游戲'
},
{
xtype: "combo",
name: "sex",
store: ["男", "女", "保密"],
fieldLabel: "性別",
emptyText: "請選擇性別"
}
]
},
{
xtype: "fieldset",
checkboxToggle: true, //有checkbox的選擇框
checkboxName: "chkinfo",
autoHeight:true,//使自適應展開排版
title: "選填信息",
defaultType: "textfield",
width: 330,
autoHeight: true,
items: [
{
fieldLabel: "UserName",
name: "user",
anchor: "95%",
vtype: "email", //email格式驗證
vtypeText: "不是有效的郵箱地址"
},
{
fieldLabel: "PassWord",
name: "pass",
id: "pass",
inputType: "password",
anchor: "95%", //對應整個的寬度 剩下的寬度的95%，留下5%作為后面提到的驗證錯誤提示
allowBlank: false,
blankText: "密碼不允許為空！"
},
{
fieldLabel: "ConfirmPass",
id: "confirmpass",
name: "confirmpass",
vtype: "password",
vtypeText: "兩次密碼輸入不一致!",
confirmTo: "pass",
inputType:"password",
anchor: "95%"
}
]
}],
buttonAlign: "center",
buttons: [{ text: "登錄" }, { text: "退出", handler: function() { frmLogin.hide(); } }]
});
});
</script>
</head>
<body>
<div id="contaner"></div>
</body>
</html>
實例4.表單驗證實例（空驗證，密碼確認驗證，email驗證）
我們可以用單獨的js寫表單驗證，但是extjs已經為我們想到了（自己單獨寫反而不方便）。
在驗證之前，我不得不提兩個小知識點：
我們可以用單獨的js寫表單驗證，但是extjs已經為我們想到了（自己單獨寫反而不方便）。
在驗證之前，我不得不提兩個小知識點：
//大家在很多的extjs代碼中都看到了這兩個，他們都起提示作用的
Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚舉值為"qtip","title","under","side",id(元素id)
//side方式用的較多，右邊出現紅色感嘆號，鼠標上去出現錯誤提示，其他的我就不介紹了，可自行驗證
//大家可以分別去掉這兩行代碼，看效果就會明白他們的作用，（放在onReady的function（）{}中）
4.1 看一個最簡單的例子：空驗證
//空驗證的兩個參數
1.allowBlank:false//false則不能為空，默認為true
2.blankText:string//當為空時的錯誤提示信息
1.allowBlank:false//false則不能為空，默認為true
2.blankText:string//當為空時的錯誤提示信息
js代碼為：
var form1 = new Ext.form.FormPanel({
width:350,
frame:true,
renderTo:"form1",
labelWidth:80,
title:"FormPanel",
4.2用vtype格式進行簡單的驗證。
在此舉郵件驗證的例子，重寫上面代碼的items配置:
items:[
{fieldLabel:"不能為空",
vtype:"email",//email格式驗證
vtypeText:"不是有效的郵箱地址",//錯誤提示信息,默認值我就不說了
id:"blanktest",
anchor:"90%"
}
4.3你可以修改上面的vtype為以下的幾種extjs的vtype默認支持的驗證：
//form驗證中vtype的默認支持類型
1.alpha //只能輸入字母，無法輸入其他（如數字，特殊符號等）
2.alphanum//只能輸入字母和數字，無法輸入其他
3.email//email驗證，要求的格式是“langsin@gmail.com”
4.url//url格式驗證，要求的格式類似於
前面的驗證都是extjs已經提供的驗證，我們也可以自定義驗證函數，比上面要復雜點了。
我們修改前面的代碼：
//先用Ext.apply方法添加自定義的password驗證函數（也可以取其他的名字）
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val指這里的文本框值，field指這個文本框組件，大家要明白這個意思
if(field.confirmTo){//confirmTo是我們自定義的配置參數，一般用來保存另外的組件的id值
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個id的值
return (val==pwd.getValue());
}
return true;
}
});
5.Checkbox 和Radio簡單示例
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var myform = new Ext.FormPanel({
frame: true,
width: 500,
layout: "form",
labelWidth: 30,
title: "checkBox示例",
labelAlign: "left",
renderTo: Ext.getBody(),
items: [{
xtype: "panel",
layout: "column",
fieldLabel: "愛好",
items: [
{
columnWidth:.2,
xtype:"checkbox",
boxLabel:"足球"
},
{
columnWidth: .2,
xtype: "checkbox",
boxLabel: "籃球"
}
]
},
{
xtype: "panel",
layout: "column",
fieldLabel: "性別",
items: [
{
columnWidth:.2,
xtype:"radio",
boxLabel:"男",
name:"sex"
},
{
columnWidth: .2,
xtype: "radio",
boxLabel: "女",
name:"sex"
}
]
},
{
xtype: "panel",
layout: "form",
labelWidth: 50,
height: 100,
labelAlign:"top",
items: [
{
xtype:"htmleditor",
fieldLabel:"備注",
anchor:"99%"
}
]
}
]
}
);
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
//其他幾個參數
1.checked：true//true則選中，默認為false
2.name:"**"//name值
3.value:""//初始化值，默認為undefine
1.checked：true//true則選中，默認為false
2.name:"**"//name值
3.value:""//初始化值，默認為undefine
6.htmleditor簡單示例
js代碼：
//基本上同上
Ext.onReady(function(){
Ext.QuickTips.init();
var myform=new Ext.FormPanel({
frame:true,
width:600,
layout:"form",
labelWidth:50,
title:"htmleditor簡單示例",
labelAlign:"top",//items中的標簽的位置
renderTo:Ext.getBody(),
items:[{
xtype:"htmleditor",
id:"he",
fieldLabel:"編輯器",
anchor:"99%"
}]
Ext.onReady(function(){
Ext.QuickTips.init();
var myform=new Ext.FormPanel({
frame:true,
width:600,
layout:"form",
labelWidth:50,
title:"htmleditor簡單示例",
labelAlign:"top",//items中的標簽的位置
renderTo:Ext.getBody(),
items:[{
xtype:"htmleditor",
id:"he",
fieldLabel:"編輯器",
anchor:"99%"
}]
});
);
);
//labelAlign參數
labelAlign:此參數是指form表單中items各項的label位置，默認值為left，枚舉值有left,right,top
labelAlign:此參數是指form表單中items各項的label位置，默認值為left，枚舉值有left,right,top
幾個其他的參數：
//補充幾個參數
1.hideLabel:true//默認為false，還適用於有標簽的所有表單組件
//下面的一組參數控制編輯器的工具欄選項,都是默認值為true
2.enableColors：true//默認為true，顯示字體顏色，字體背景顏色
3.enableAlignments:true//左，中，右對齊
4.enableFont：true//字體
5.enableFontSize:false//字體大小，就是A旁邊有個小箭頭的
6.enableFormat：false//粗體，斜體，下划線
7.enableLinks:true//鏈接
8.enableLists：true//列表
9.enableSourceEdit：true//源代碼編輯
1.hideLabel:true//默認為false，還適用於有標簽的所有表單組件
//下面的一組參數控制編輯器的工具欄選項,都是默認值為true
2.enableColors：true//默認為true，顯示字體顏色，字體背景顏色
3.enableAlignments:true//左，中，右對齊
4.enableFont：true//字體
5.enableFontSize:false//字體大小，就是A旁邊有個小箭頭的
6.enableFormat：false//粗體，斜體，下划線
7.enableLinks:true//鏈接
8.enableLists：true//列表
9.enableSourceEdit：true//源代碼編輯