|
|
知道表單面板如何創建
了解表單面板中xtype的類型的應用
知道表單面板如何驗證，綁定，取值
綜合應用表單面板（玩轉它）
內容:
首先我們要理解的是FormPanel也是繼承panel組件的。所以它有著panel的屬性
要創建一個表單面板其實很簡單 var MyformPanel=new Ext.form.formpanel();
表單面板和面板一樣只是作為一個容器出現的，需要我們使用items加入各控件元素來豐富我們的表單面板，
defaults:{},此屬性提取了items中各組件項的共同屬性
對于xtype:在表單面板中非常有用，沒有必要每次都用new 來創建一個組件，它定義了組件的類型，同時讓組件在加載后渲染。
復制代碼 代碼如下:
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提供了非常強大的支持，在后面的實例中大家可以發現
實例分析講解：
一，創建表單面板
復制代碼 代碼如下:
function Read2() {
Ext.QuickTips.init();
var MyForm=new Ext.form.FormPanel({
title:'表單應用',
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' 這個時候表單面板顯示失效 想來很久不知道是怎么一回事
二，基本表單組建的應用于說明 (通常情況下我們都是利用xtype來說明 items中組件的類型)
fieldset的應用
復制代碼 代碼如下:
function Read3() {
var MyformPanel=new Ext.form.FormPanel({
title:'fieldset的應用',
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:'請輸入用戶密碼'
}
]
}
]
});
} 
表單面板中基本組件的介紹
復制代碼 代碼如下:
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是我們自定義的配置參數，一般用來保存另外的組件的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的應用',
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的坐標
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 只能輸入字母，無法輸入其他（如數字，特殊符號等）
//2.alphanum//只能輸入字母和數字，無法輸入其他
//3.email//email驗證，要求的格式是"[email protected]"
//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,實現多列布局
fieldLabel:'愛好',
isFormField:true,//非常重要,否則panel默認不顯示fieldLabel
items:[{
columnWidth:.5,//寬度為50%
xtype:"checkbox",
boxLabel:"足球",//顯示在復選框右邊的文字
name:""
},{
columnWidth:.5,
xtype:"checkbox",
boxLabel:"籃球",
name:""
}]
},
{
xtype:'combo',
fieldLabel:'用戶家鄉',
name:'family',
store:<%=getfamilyData() %>,//調用后臺變量
emptyText:'請選擇家鄉'
},
{
xtype:"htmleditor",
id:"myinfo",
fieldLabel:"個人說明",
anchor:"99%"
}
]
}
]
});
} 
表單數據提交到服務器 submit
submit: function(){
this.getEl().dom.action = 'MyPages/GetForm.ASPx', //提交后轉向的頁面
this.getEl().dom.method='POST',//提交方式
this.getEl().dom.submit();//執行提交
},
添加提交按鈕
buttons:[{text:"確定",handler:login,formBind:true},{text:"取消",handler:reset}]
添加提交方法：
function login(){
MyformPanel.form.submit();//提交
}
function reset(){
MyformPanel.form.reset();//取消
} 
本課代碼：
表單面板的綜合應用
復制代碼 代碼如下:
<%@ 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中常用表單介紹與應用</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:'表單應用',
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的坐標
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:'表單應用',
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的坐標
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是我們自定義的配置參數，一般用來保存另外的組件的id值
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個id的值
return (val==pwd.getValue());
}
return true;
}
});
var MyformPanel=new Ext.form.FormPanel({
title:'fieldset的應用',
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的坐標
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 只能輸入字母，無法輸入其他（如數字，特殊符號等）
//2.alphanum//只能輸入字母和數字，無法輸入其他
//3.email//email驗證，要求的格式是"[email protected]"
//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,實現多列布局
fieldLabel:'愛好',
isFormField:true,//非常重要,否則panel默認不顯示fieldLabel
items:[{
columnWidth:.5,//寬度為50%
xtype:"checkbox",
boxLabel:"足球",//顯示在復選框右邊的文字
name:""
},{
columnWidth:.5,
xtype:"checkbox",
boxLabel:"籃球",
name:""
}]
},
{
xtype:'combo',
fieldLabel:'用戶家鄉',
name:'family',
store:<%=getfamilyData() %>,//調用后臺變量
emptyText:'請選擇家鄉'
},
{
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>
JavaScript技術：Extjs中常用表單介紹與應用，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
