|
|
知道表單面板如何創(chuàng)建
了解表單面板中xtype的類型的應(yīng)用
知道表單面板如何驗(yàn)證，綁定，取值
綜合應(yīng)用表單面板（玩轉(zhuǎn)它）
內(nèi)容:
首先我們要理解的是FormPanel也是繼承panel組件的。所以它有著panel的屬性
要創(chuàng)建一個(gè)表單面板其實(shí)很簡單 var MyformPanel=new Ext.form.formpanel();
表單面板和面板一樣只是作為一個(gè)容器出現(xiàn)的，需要我們使用items加入各控件元素來豐富我們的表單面板，
defaults:{},此屬性提取了items中各組件項(xiàng)的共同屬性
對于xtype:在表單面板中非常有用，沒有必要每次都用new 來創(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
對于表單驗(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:'請輸入用戶名',
blankText:'請輸入用戶名'
},
{
fieldLabel:'用戶密碼',
name:'userpassword',
id:'password',
inputType:'password',//它還包括 radiocheck text(默認(rèn)) filepassword等等
blankText:'請輸入密碼'
}
],
buttons:[{text:"確定"},{text:"取消",handler:function(){alert("事件！");}}],
buttonAlign:'center'
});
}
注意：renderTo:'id1' 這個(gè)時(shí)候表單面板顯示失效 想來很久不知道是怎么一回事
二，基本表單組建的應(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:'陳建強(qiáng)',
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指這個(gè)文本框組件，大家要明白這個(gè)意思
5 if(field.confirmTo){//confirmTo是我們自定義的配置參數(shù)，一般用來保存另外的組件的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,//拖動時(shí)不虛線顯示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//獲取拖動時(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);//移動到最終位置
}
},
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:'請輸入用戶名稱',
anchor:'95%'
},
{
fieldLabel:'用戶密碼',
inputType:'password',// password text checkbox rodio
id:'password',
name:'userpassword',
value:'0717',
blankText:'請輸入用戶密碼',
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 只能輸入字母，無法輸入其他（如數(shù)字，特殊符號等）
//2.alphanum//只能輸入字母和數(shù)字，無法輸入其他
//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:'愛好',
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)用后臺變量
emptyText:'請選擇家鄉(xiāng)'
},
{
xtype:"htmleditor",
id:"myinfo",
fieldLabel:"個(gè)人說明",
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,//拖動時(shí)不虛線顯示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//獲取拖動時(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);//移動到最終位置
}
},
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,//拖動時(shí)不虛線顯示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//獲取拖動時(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);//移動到最終位置
}
},
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指這個(gè)文本框組件，大家要明白這個(gè)意思
if(field.confirmTo){//confirmTo是我們自定義的配置參數(shù)，一般用來保存另外的組件的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,//拖動時(shí)不虛線顯示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//獲取拖動時(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);//移動到最終位置
}
},
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:'請輸入用戶名稱',
anchor:'95%'
},
{
fieldLabel:'用戶密碼',
inputType:'password',// password text checkbox rodio
id:'password',
name:'userpassword',
value:'0717',
blankText:'請輸入用戶密碼',
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 只能輸入字母，無法輸入其他（如數(shù)字，特殊符號等）
//2.alphanum//只能輸入字母和數(shù)字，無法輸入其他
//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:'愛好',
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)用后臺變量
emptyText:'請選擇家鄉(xiāng)'
},
{
xtype:"htmleditor",
id:"myinfo",
fieldLabel:"個(gè)人說明",
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技術(shù)：Extjs中常用表單介紹與應(yīng)用，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
