|
表單時(shí)是web中常見(jiàn)的元素，Ext中的表單也是特別豐富的，接下來(lái)我們一塊看看表單的相關(guān)內(nèi)容。
還是先看一下代碼和效果：
Ext.onReady(function(){
var fp=new Ext.form.FormPanel({ //注意：Ext.form.FormPanel=Ext.FormPanel
title:'用戶(hù)登錄',
width:300,
//height:250,
bodyStyle:'padding:5px 5px 0',
renderTo:'divFormPanel',
frame:true,//在此，這個(gè)屬性就很重要了，如果不為true，你會(huì)看到下面的button和panel看起來(lái)是分開(kāi)的
url:'login.aspx',//提交地址
method:'post',//提交方法
defaults:{ //在這里同一定義item中屬性，否則需要各個(gè)指明
xtype:'textfield',
labelAlign:'left',
labelWidth:80,
width:100
},
items:[
{
fieldLabel:'用戶(hù)名',
xtype:'textfield',//Ext基本類(lèi)型，也可以用其對(duì)應(yīng)的form元素代替
name:'userName',
id:'userName'
//width:100
},
{
fieldLabel:'密碼',
//xtype:'textfield',//Ext基本類(lèi)型，也可以用其對(duì)應(yīng)的form元素代替
inputType:'password',
name:'userPwd',
id:'userPwd'
//width:100
}
],
buttonAlign:'center',//按鈕對(duì)其方式
buttons:[
{
text:'確定'
},
{
text:'取消',
handler:function(){//點(diǎn)擊取消按鈕的操作事件
fp.hide();
}
}
]
});
});
FormPanel也比較好用，但是我認(rèn)為我們有必要就上面xtype和inputType說(shuō)幾點(diǎn)。
大家其實(shí)很多時(shí)候會(huì)發(fā)現(xiàn)，在Ext組件中（對(duì)于所有容器組件[這里就是可以有子組件的組件]）items里面基本上有兩種存在形式，一種就是像上面一樣我們直接以Json的形式進(jìn)行配置；另一種就是既然items中是一個(gè)個(gè)item，我們可以定義一個(gè)對(duì)象放到里面，例如假設(shè)在一個(gè)panel中還有一個(gè)子panel，我們就可以直接var pn=new Ext.Panel({…});然后放到items中。上面的話(huà)我再?gòu)?qiáng)調(diào)一下，它不僅僅針對(duì)FormPanel，而是對(duì)于所有容器組件都是這樣。不妨看一個(gè)例子，我覺(jué)得大家經(jīng)?？吹竭@樣的代碼：
var panel=new Ext.Panel({
renderTo:"divPanel",
title:"我的面板",
width:400,
height:300,
items:[
new Ext.Panel({title:'子panel1',html:'子panel1內(nèi)容'}),
new Ext.Panel({title:'子panel2',html:'子panel2內(nèi)容'})
]
});
以至于很多初學(xué)者認(rèn)為像上面的代碼不能夠?qū)懗上旅娴男问剑?/p>
var panel=new Ext.Panel({
renderTo:"divPanel",
title:"我的面板",
width:400,
height:300,
items:[
{…}，
{…}
]
});
其實(shí)這是對(duì)于xtype不太了解的原因。Ext中xtype和Class（類(lèi)）是一一對(duì)應(yīng)的，所以既然上面items中是panel對(duì)象，那么就有對(duì)應(yīng)的xtype，事實(shí)上我們可以知道它對(duì)應(yīng)"panel"，那么既然是這樣，上面的代碼當(dāng)然可以寫(xiě)成第第一種存在形式：
var panel=new Ext.Panel({
renderTo:"divPanel",
title:"我的面板",
width:400,
height:300,
items:[
{xtype:'panel',title:'子panel1',html:'子panel1內(nèi)容'},
{xtype:'panel',title:'子panel2',html:'子panel2內(nèi)容'}
]
});
事實(shí)上從本質(zhì)上來(lái)講上面兩種情況是一樣的，只是表現(xiàn)形式不同而已，那么對(duì)于上面的代碼如何用第二種方式呢，你會(huì)問(wèn)，像{ fieldLabel:'用戶(hù)名', xtype:'textfield',//Ext基本類(lèi)型，也可以用其對(duì)應(yīng)的form元素代替name:'userName',id:'userName' //width:100 }這樣的代碼是什么對(duì)象呢？其實(shí)它對(duì)應(yīng)的是"Ext.form.TextField"。這里放上一張對(duì)應(yīng)表：
|
xtype
|
類(lèi)
|
|
box
|
Ext.BoxComponent
|
|
button
|
Ext.Button
|
|
colorpalette
|
Ext.ColorPalette
|
|
component
|
Ext.Component
|
|
container
|
Ext.Container
|
|
cycle
|
Ext.CycleButton
|
|
dataview
|
Ext.DataView
|
|
datepicker
|
Ext.DatePicker
|
|
editor
|
Ext.Editor
|
|
editorgrid
|
Ext.grid.EditorGridPanel
|
|
grid
|
Ext.grid.GridPanel
|
|
paging
|
Ext.PagingToolbar
|
|
panel
|
Ext.Panel
|
|
progress
|
Ext.ProgressBar
|
|
propertygrid
|
Ext.grid.PropertyGrid
|
|
slider
|
Ext.Slider
|
|
splitbutton
|
Ext.SplitButton
|
|
statusbar
|
Ext.StatusBar
|
|
tabpanel
|
Ext.TabPanel
|
|
treepanel
|
Ext.tree.TreePanel
|
|
viewport
|
Ext.Viewport
|
|
window
|
Ext.Window
|
|
toolbar
|
Ext.Toolbar
|
|
tbbutton
|
Ext.Toolbar.Button
|
|
tbfill
|
Ext.Toolbar.Fill
|
|
tbitem
|
Ext.Toolbar.Item
|
|
tbseparator
|
Ext.Toolbar.Separator
|
|
tbspacer
|
Ext.Toolbar.Spacer
|
|
tbsplit
|
Ext.Toolbar.SplitButton
|
|
tbtext
|
Ext.Toolbar.TextItem
|
|
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
|
好了，說(shuō)了那么多xtype，inputType還沒(méi)有說(shuō)呢。我們說(shuō)xtype和class是對(duì)應(yīng)的，當(dāng)然表單中xtype和class都有inputType屬性，而且最為有意思的是對(duì)于form中的元素inputType的取值范圍是一樣的，什么意思呢？我們還看例子（我們直接對(duì)上面的代碼精簡(jiǎn)好了，這個(gè)例子中我們就用class形式好了）：
var fp=new Ext.form.FormPanel({
title:'用戶(hù)登錄',
width:300,
bodyStyle:'padding:5px 5px 0',
renderTo:'divFormPanel',
frame:true,
items:[
new Ext.form.Radio({
boxLabel:'男',
name:'sex',
id:'male'
}),
new Ext.form.Radio({
boxLabel:'女',
name:'sex',
id:'sex_female'
})
]
});
上面這個(gè)例子很簡(jiǎn)單（不太好看，因?yàn)榈竭@里還沒(méi)有說(shuō)到form中相關(guān)控件，所以沒(méi)有在布局上花功夫），也很容易理解，就是Radio控件嗎。但是我修改過(guò)inputType之后呢：
var fp=new Ext.form.FormPanel({
title:'用戶(hù)登錄',
width:300,
bodyStyle:'padding:5px 5px 0',
renderTo:'divFormPanel',
frame:true,
items:[
new Ext.form.Radio({
boxLabel:'男',
inputType:'textfield',
name:'sex',
id:'male'
}),
new Ext.form.Radio({
boxLabel:'女',
inputType:'file',
name:'sex',
id:'sex_female'
})
]
});
可以說(shuō)上面的代碼如果對(duì)于初學(xué)者來(lái)說(shuō)肯定想不到一個(gè)radio變成了textfield，另一個(gè)變成了file。不是創(chuàng)建的Radio對(duì)象嗎？怎么成了其他的控件，這個(gè)就是Ext中inputType的特殊之處。
|
