Extjs中常用表單介紹與應(yīng)用

更新時(shí)間：2010年06月07日 23:47:32 作者：

知道表單面板如何創(chuàng)建了解表單面板中xtype的類型的應(yīng)用知道表單面板如何驗(yàn)證，綁定，取值綜合應(yīng)用表單面板（玩轉(zhuǎn)它）

目標(biāo):
知道表單面板如何創(chuàng)建
了解表單面板中xtype的類型的應(yīng)用
知道表單面板如何驗(yàn)證，綁定，取值
綜合應(yīng)用表單面板（玩轉(zhuǎn)它）
內(nèi)容:
首先我們要理解的是FormPanel也是繼承panel組件的。所以它有著panel的屬性
要?jiǎng)?chuàng)建一個(gè)表單面板其實(shí)很簡(jiǎn)單 var MyformPanel=new Ext.form.formpanel();
表單面板和面板一樣只是作為一個(gè)容器出現(xiàn)的，需要我們使用items加入各控件元素來(lái)豐富我們的表單面板，
defaults:{},此屬性提取了items中各組件項(xiàng)的共同屬性

對(duì)于xtype:在表單面板中非常有用，沒(méi)有必要每次都用new 來(lái)創(chuàng)建一個(gè)組件，它定義了組件的類型，同時(shí)讓組件在加載后渲染。

復(fù)制代碼代碼如下:

 
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 

對(duì)于表單驗(yàn)證，Extjs提供了非常強(qiáng)大的支持，在后面的實(shí)例中大家可以發(fā)現(xiàn)

實(shí)例分析講解：

一，創(chuàng)建表單面板

復(fù)制代碼代碼如下:

 
function Read2() { 
Ext.QuickTips.init(); 
var MyForm=new Ext.form.FormPanel({ 
title:'表單應(yīng)用', 
width:300, 
x:300, 
y:50, 
floating:true, 
tools:[{id:'close'}], 
frame:true, 
bodyStyle:'padding:10px 0px 1px 1px', 
labelSeparator:':', 
labelAlign:'right', 
renderTo:Ext.getBody(),//為什么這里不可以用'id1' 
defaults:{xtype:'textfield',width:150,allowBlank:false,msgTarget:'side'},//提取共同屬性 
items:[ 
{ 
fieldLabel:'用戶名稱', 
name:'username', 
id:'user', 
emptyText:'請(qǐng)輸入用戶名', 
blankText:'請(qǐng)輸入用戶名' 
}, 
{ 
fieldLabel:'用戶密碼', 
name:'userpassword', 
id:'password', 
inputType:'password',//它還包括 radiocheck text(默認(rèn)) filepassword等等 
blankText:'請(qǐng)輸入密碼' 

} 

], 
buttons:[{text:"確定"},{text:"取消",handler:function(){alert("事件！");}}], 
buttonAlign:'center' 

}); 
} 

注意：renderTo:'id1' 這個(gè)時(shí)候表單面板顯示失效想來(lái)很久不知道是怎么一回事

二，基本表單組建的應(yīng)用于說(shuō)明 (通常情況下我們都是利用xtype來(lái)說(shuō)明 items中組件的類型)
fieldset的應(yīng)用

復(fù)制代碼代碼如下:

 
function Read3() { 
var MyformPanel=new Ext.form.FormPanel({ 
title:'fieldset的應(yīng)用', 
renderTo:Ext.getBody(), 
frame:true, 
width:350, 
x:400, 
y:50, 
floating:true, 
items:[ 
{ 
xtype:'fieldset', 
title:'用戶信息', 
collapsible:true, 
autoHeight:true, 
autoWidth:true, 
defaults:{width:150,allowBlank:false,xtype:'textfield'}, 
items:[ 
{ 
fieldLabel:'用戶名稱', 
emptyText:'陳建強(qiáng)', 
blankText:'請(qǐng)輸入用戶名稱' 
}, 
{ 
fieldLabel:'用戶密碼', 
inputType:'password', 
blankText:'請(qǐng)輸入用戶密碼' 
} 
] 
} 
] 
}); 
} 

表單面板中基本組件的介紹

復(fù)制代碼代碼如下:

 
function Read3() { 
2 Ext.QuickTips.init();//初始化tips 
3 Ext.apply(Ext.form.VTypes,{ 
4 password:function(val,field){//val指這里的文本框值，field指這個(gè)文本框組件，大家要明白這個(gè)意思 
5 if(field.confirmTo){//confirmTo是我們自定義的配置參數(shù)，一般用來(lái)保存另外的組件的id值 
6 var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個(gè)id的值 
7 return (val==pwd.getValue()); 
8 } 
9 return true; 
} 
}); 
var MyformPanel=new Ext.form.FormPanel({ 
title:'fieldset的應(yīng)用', 
renderTo:Ext.getBody(), 
frame:true, 
width:550, 
x:400, 
y:50, 
draggable:{ 
insertProxy: false,//拖動(dòng)時(shí)不虛線顯示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//獲取拖動(dòng)時(shí)panel的坐標(biāo) 
var s = this.panel.getEl().shadow; 
if (s){ 
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
} 
}, 
endDrag : function(e){ 
this.panel.setPosition(this.x, this.y);//移動(dòng)到最終位置 
} 
}, 
plain:true, 
floating:true, 
items:[ 
{ 
xtype:'fieldset', 
checkboxToggle:true, 
checkboxName:'user', 
title:'用戶信息', 
collapsible:true, 
autoHeight:true, 
autoWidth:true, 
labelSeparator:':', 
labelAlign:'right', 
labelWidth:70, 
defaults:{width:150,allowBlank:false,xtype:'textfield'}, 
items:[ 
{ 
fieldLabel:'用戶名稱', 
emptyText:'陳建強(qiáng)', 
id:'user', 
name:'userName', 
blankText:'請(qǐng)輸入用戶名稱', 
anchor:'95%' 
}, 
{ 
fieldLabel:'用戶密碼', 
inputType:'password',// password text checkbox rodio 
id:'password', 
name:'userpassword', 
value:'0717', 
blankText:'請(qǐng)輸入用戶密碼', 
anchor:'95%' 
}, 
{ 
fieldLabel:'確認(rèn)密碼', 
id:'password2', 
name:'userpassword2', 
inputType:'password', 
vtype:'password', 
vtypeText:'兩次輸入的密碼不一致', 
confirmTo:'userpassword', 
anchor:'95%' 
}, 
{ 
xtype:"datefield", 
fieldLabel:"出生日期", 
anchor:"95%" 
}, 
{ 
fieldLabel:'我的博客', 
value:'http://www.cnblogs.com/chenjq0717', 
vtype:'url', 
vtypeText:'不是有效的url', 
id1:'myblog', 
name:'myblog', 
anchor:'95%' 
}, 
{ 
//alpha 只能輸入字母，無(wú)法輸入其他（如數(shù)字，特殊符號(hào)等） 
//2.alphanum//只能輸入字母和數(shù)字，無(wú)法輸入其他 
//3.email//email驗(yàn)證，要求的格式是"langsin@gmail.com" 
//4.url//url格式驗(yàn)證，要求的格式是http://www.langsin.com 
fieldLabel:'電子郵箱', 
vtype:'email', 
vtypeText:'不是有效的郵箱', 
name:'email', 
anchor:'95%' 
}, 
{ 
xtype:"panel", 
layout:"column", 
fieldLabel:'性別', 
isFormField:true, 
items:[{ 
columnWidth:.5, 
xtype:"radio", 
boxLabel:"男", 
name:"sex" 
//inputValue 
},{ 
columnWidth:.5, 
checked:true, 
xtype:"radio", 
boxLabel:"女", 
name:"sex" 
}] 
}, 
{ 
xtype:"panel", 
layout:"column",//也可以是table,實(shí)現(xiàn)多列布局 
fieldLabel:'愛(ài)好', 
isFormField:true,//非常重要,否則panel默認(rèn)不顯示fieldLabel 
items:[{ 
columnWidth:.5,//寬度為50% 
xtype:"checkbox", 
boxLabel:"足球",//顯示在復(fù)選框右邊的文字 
name:"" 
},{ 
columnWidth:.5, 
xtype:"checkbox", 
boxLabel:"籃球", 
name:"" 
}] 
}, 
{ 
xtype:'combo', 
fieldLabel:'用戶家鄉(xiāng)', 
name:'family', 
store:<%=getfamilyData() %>,//調(diào)用后臺(tái)變量 
emptyText:'請(qǐng)選擇家鄉(xiāng)' 
}, 
{ 
xtype:"htmleditor", 
id:"myinfo", 
fieldLabel:"個(gè)人說(shuō)明", 
anchor:"99%" 
} 
] 
} 
] 
}); 
} 

表單數(shù)據(jù)提交到服務(wù)器 submit

submit: function(){
this.getEl().dom.action = 'MyPages/GetForm.aspx', //提交后轉(zhuǎn)向的頁(yè)面
this.getEl().dom.method='POST',//提交方式
this.getEl().dom.submit();//執(zhí)行提交
},

添加提交按鈕

buttons:[{text:"確定",handler:login,formBind:true},{text:"取消",handler:reset}]

添加提交方法：

function login(){
MyformPanel.form.submit();//提交
}
function reset(){
MyformPanel.form.reset();//取消
}

本課代碼：
表單面板的綜合應(yīng)用

復(fù)制代碼代碼如下:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext7.aspx.cs" Inherits="EXT1.Ext7" %> 
2 
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
4 
5 <html xmlns="http://www.w3.org/1999/xhtml" > 
6 <head runat="server"> 
7 <title>第七課,Extjs中常用表單介紹與應(yīng)用</title> 
8 <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
9 <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script> 
<script src="ext-3.2.0/ext-all.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function Read1() { 
Ext.QuickTips.init(); 
var MyForm=new Ext.form.FormPanel({ 
title:'表單應(yīng)用', 
width:300, 
height:200, 
x:300, 
y:50, 
floating:true, 
tools:[{id:'close'}], 
draggable:{ 
insertProxy: false,//拖動(dòng)時(shí)不虛線顯示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//獲取拖動(dòng)時(shí)panel的坐標(biāo) 
var s = this.panel.getEl().shadow; 
if (s){ 
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
} 
}, 
endDrag : function(e){ 
this.panel.setPosition(this.x, this.y);//移動(dòng)到最終位置 
} 
}, 
frame:true, 
labelSeparator:':', 
labelAlign:'right', 
renderTo:Ext.getBody(),//為什么這里不可以用'id1' 
items:[ 
new Ext.form.TextField({ 
fieldLabel:'用戶名稱', 
allowBlank:false, 
blankText:'請(qǐng)輸入用戶名', 
msgTarget:'side' 
}), 
new Ext.form.TextField({ 
fieldLabel:'用戶密碼', 
allowBlank:false, 
inputType:'password', 
blankText:'請(qǐng)輸入密碼', 
msgTarget:'side' 
}) 
] 
}); 
} 
function Read2() { 
Ext.QuickTips.init(); 
var MyForm=new Ext.form.FormPanel({ 
title:'表單應(yīng)用', 
width:300, 
x:300, 
y:50, 
floating:true, 
tools:[{id:'close'}], 
frame:true, 
bodyStyle:'padding:10px 0px 1px 1px', 
labelSeparator:':', 
labelAlign:'right', 
draggable:{ 
insertProxy: false,//拖動(dòng)時(shí)不虛線顯示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//獲取拖動(dòng)時(shí)panel的坐標(biāo) 
var s = this.panel.getEl().shadow; 
if (s){ 
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
} 
}, 
endDrag : function(e){ 
this.panel.setPosition(this.x, this.y);//移動(dòng)到最終位置 
} 
}, 
renderTo:Ext.getBody(),//為什么這里不可以用'id1' 
defaults:{xtype:'textfield',width:150,allowBlank:false,msgTarget:'side'},//提取共同屬性 
items:[ 
{ 
fieldLabel:'用戶名稱', 
name:'username', 
id:'user', 
emptyText:'請(qǐng)輸入用戶名', 
blankText:'請(qǐng)輸入用戶名' 
}, 
{ 
fieldLabel:'用戶密碼', 
name:'userpassword', 
id:'password', 
inputType:'password', 
blankText:'請(qǐng)輸入密碼' 
} 
], 
buttons:[{text:"確定"},{text:"取消",handler:function(){alert("事件！");}}], 
buttonAlign:'center' 
}); 
} 
function Read3() { 
Ext.QuickTips.init();//初始化tips 
Ext.apply(Ext.form.VTypes,{ 
password:function(val,field){//val指這里的文本框值，field指這個(gè)文本框組件，大家要明白這個(gè)意思 
if(field.confirmTo){//confirmTo是我們自定義的配置參數(shù)，一般用來(lái)保存另外的組件的id值 
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個(gè)id的值 
return (val==pwd.getValue()); 
} 
return true; 
} 
}); 
var MyformPanel=new Ext.form.FormPanel({ 
title:'fieldset的應(yīng)用', 
renderTo:Ext.getBody(), 
frame:true, 
width:550, 
x:400, 
y:50, 
draggable:{ 
insertProxy: false,//拖動(dòng)時(shí)不虛線顯示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//獲取拖動(dòng)時(shí)panel的坐標(biāo) 
var s = this.panel.getEl().shadow; 
if (s){ 
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
} 
}, 
endDrag : function(e){ 
this.panel.setPosition(this.x, this.y);//移動(dòng)到最終位置 
} 
}, 
submit: function(){ 
this.getEl().dom.action = 'MyPages/GetForm.aspx', 
this.getEl().dom.method='POST', 
this.getEl().dom.submit(); 
}, 
plain:true, 
floating:true, 
items:[ 
{ 
xtype:'fieldset', 
checkboxToggle:true, 
checkboxName:'user', 
title:'用戶信息', 
collapsible:true, 
autoHeight:true, 
autoWidth:true, 
labelSeparator:':', 
labelAlign:'right', 
labelWidth:70, 
defaults:{width:150,allowBlank:false,xtype:'textfield'}, 
items:[ 
{ 
fieldLabel:'用戶名稱', 
//emptyText:'陳建強(qiáng)', 
id:'user', 
name:'userName', 
blankText:'請(qǐng)輸入用戶名稱', 
anchor:'95%' 
}, 
{ 
fieldLabel:'用戶密碼', 
inputType:'password',// password text checkbox rodio 
id:'password', 
name:'userpassword', 
value:'0717', 
blankText:'請(qǐng)輸入用戶密碼', 
anchor:'95%' 
}, 
{ 
fieldLabel:'確認(rèn)密碼', 
id:'password2', 
name:'userpassword2', 
inputType:'password', 
vtype:'password', 
vtypeText:'兩次輸入的密碼不一致', 
confirmTo:'userpassword', 
anchor:'95%' 
}, 
{ 
xtype:"datefield", 
fieldLabel:"出生日期", 
anchor:"95%" 
}, 
{ 
fieldLabel:'我的博客', 
value:'http://www.cnblogs.com/chenjq0717', 
vtype:'url', 
vtypeText:'不是有效的url', 
id1:'myblog', 
name:'myblog', 
anchor:'95%' 
}, 
{ 
//alpha 只能輸入字母，無(wú)法輸入其他（如數(shù)字，特殊符號(hào)等） 
//2.alphanum//只能輸入字母和數(shù)字，無(wú)法輸入其他 
//3.email//email驗(yàn)證，要求的格式是"langsin@gmail.com" 
//4.url//url格式驗(yàn)證，要求的格式是http://www.langsin.com 
fieldLabel:'電子郵箱', 
vtype:'email', 
vtypeText:'不是有效的郵箱', 
name:'email', 
anchor:'95%' 
}, 
{ 
xtype:"panel", 
layout:"column", 
fieldLabel:'性別', 
isFormField:true, 
items:[{ 
columnWidth:.5, 
xtype:"radio", 
boxLabel:"男", 
name:"sex" 
//inputValue 
},{ 
columnWidth:.5, 
checked:true, 
xtype:"radio", 
boxLabel:"女", 
name:"sex" 
}] 
}, 
{ 
xtype:"panel", 
layout:"column",//也可以是table,實(shí)現(xiàn)多列布局 
fieldLabel:'愛(ài)好', 
isFormField:true,//非常重要,否則panel默認(rèn)不顯示fieldLabel 
items:[{ 
columnWidth:.5,//寬度為50% 
xtype:"checkbox", 
boxLabel:"足球",//顯示在復(fù)選框右邊的文字 
name:"" 
},{ 
columnWidth:.5, 
xtype:"checkbox", 
boxLabel:"籃球", 
name:"" 
}] 
}, 
{ 
xtype:'combo', 
fieldLabel:'用戶家鄉(xiāng)', 
name:'family', 
store:<%=getfamilyData() %>,//調(diào)用后臺(tái)變量 
emptyText:'請(qǐng)選擇家鄉(xiāng)' 
}, 
{ 
xtype:"htmleditor", 
id:"myinfo", 
fieldLabel:"個(gè)人說(shuō)明", 
anchor:"99%" 
} 
] 
} 
], 
buttons:[{text:"確定",handler:login,formBind:true},{text:"取消",handler:reset}] 
}); 
function login(){ 
MyformPanel.form.submit();//提交 
} 
function reset(){ 
MyformPanel.form.reset();//取消 
} 
} 
Ext.onReady(Read3); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="id1"> 
</div> 
</form> 
</body> 
<script type="text/javascript"> 
</script> 
</html> 