快捷導(dǎo)航

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

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

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

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

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

復(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 

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

實例分析講解：

一，創(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:'請輸入用戶名', 
blankText:'請輸入用戶名' 
}, 
{ 
fieldLabel:'用戶密碼', 
name:'userpassword', 
id:'password', 
inputType:'password',//它還包括 radiocheck text(默認) filepassword等等 
blankText:'請輸入密碼' 

} 

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

}); 
} 

注意：renderTo:'id1' 這個時候表單面板顯示失效想來很久不知道是怎么一回事

二，基本表單組建的應(yīng)用于說明 (通常情況下我們都是利用xtype來說明 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:'陳建強', 
blankText:'請輸入用戶名稱' 
}, 
{ 
fieldLabel:'用戶密碼', 
inputType:'password', 
blankText:'請輸入用戶密碼' 
} 
] 
} 
] 
}); 
} 

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

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

 
function Read3() { 
2 Ext.QuickTips.init();//初始化tips 
3 Ext.apply(Ext.form.VTypes,{ 
4 password:function(val,field){//val指這里的文本框值，field指這個文本框組件，大家要明白這個意思 
5 if(field.confirmTo){//confirmTo是我們自定義的配置參數(shù)，一般用來保存另外的組件的id值 
6 var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個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,//拖動時不虛線顯示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//獲取拖動時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);//移動到最終位置 
} 
}, 
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:'陳建強', 
id:'user', 
name:'userName', 
blankText:'請輸入用戶名稱', 
anchor:'95%' 
}, 
{ 
fieldLabel:'用戶密碼', 
inputType:'password',// password text checkbox rodio 
id:'password', 
name:'userpassword', 
value:'0717', 
blankText:'請輸入用戶密碼', 
anchor:'95%' 
}, 
{ 
fieldLabel:'確認密碼', 
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 只能輸入字母，無法輸入其他（如數(shù)字，特殊符號等） 
//2.alphanum//只能輸入字母和數(shù)字，無法輸入其他 
//3.email//email驗證，要求的格式是"langsin@gmail.com" 
//4.url//url格式驗證，要求的格式是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,實現(xiàn)多列布局 
fieldLabel:'愛好', 
isFormField:true,//非常重要,否則panel默認不顯示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)用后臺變量 
emptyText:'請選擇家鄉(xiāng)' 
}, 
{ 
xtype:"htmleditor", 
id:"myinfo", 
fieldLabel:"個人說明", 
anchor:"99%" 
} 
] 
} 
] 
}); 
} 

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

submit: function(){
this.getEl().dom.action = 'MyPages/GetForm.aspx', //提交后轉(zhuǎn)向的頁面
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,//拖動時不虛線顯示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//獲取拖動時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);//移動到最終位置 
} 
}, 
frame:true, 
labelSeparator:':', 
labelAlign:'right', 
renderTo:Ext.getBody(),//為什么這里不可以用'id1' 
items:[ 
new Ext.form.TextField({ 
fieldLabel:'用戶名稱', 
allowBlank:false, 
blankText:'請輸入用戶名', 
msgTarget:'side' 
}), 
new Ext.form.TextField({ 
fieldLabel:'用戶密碼', 
allowBlank:false, 
inputType:'password', 
blankText:'請輸入密碼', 
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,//拖動時不虛線顯示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//獲取拖動時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);//移動到最終位置 
} 
}, 
renderTo:Ext.getBody(),//為什么這里不可以用'id1' 
defaults:{xtype:'textfield',width:150,allowBlank:false,msgTarget:'side'},//提取共同屬性 
items:[ 
{ 
fieldLabel:'用戶名稱', 
name:'username', 
id:'user', 
emptyText:'請輸入用戶名', 
blankText:'請輸入用戶名' 
}, 
{ 
fieldLabel:'用戶密碼', 
name:'userpassword', 
id:'password', 
inputType:'password', 
blankText:'請輸入密碼' 
} 
], 
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指這個文本框組件，大家要明白這個意思 
if(field.confirmTo){//confirmTo是我們自定義的配置參數(shù)，一般用來保存另外的組件的id值 
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個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,//拖動時不虛線顯示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//獲取拖動時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);//移動到最終位置 
} 
}, 
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:'陳建強', 
id:'user', 
name:'userName', 
blankText:'請輸入用戶名稱', 
anchor:'95%' 
}, 
{ 
fieldLabel:'用戶密碼', 
inputType:'password',// password text checkbox rodio 
id:'password', 
name:'userpassword', 
value:'0717', 
blankText:'請輸入用戶密碼', 
anchor:'95%' 
}, 
{ 
fieldLabel:'確認密碼', 
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 只能輸入字母，無法輸入其他（如數(shù)字，特殊符號等） 
//2.alphanum//只能輸入字母和數(shù)字，無法輸入其他 
//3.email//email驗證，要求的格式是"langsin@gmail.com" 
//4.url//url格式驗證，要求的格式是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,實現(xiàn)多列布局 
fieldLabel:'愛好', 
isFormField:true,//非常重要,否則panel默認不顯示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)用后臺變量 
emptyText:'請選擇家鄉(xiāng)' 
}, 
{ 
xtype:"htmleditor", 
id:"myinfo", 
fieldLabel:"個人說明", 
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> 