表單時(shí)是web中常見的元素，Ext中的表單也是特別豐富的，接下來(lái)我們一塊看看表單的相關(guān)內(nèi)容。
還是先看一下代碼和效果：
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中。上面的話我再?gòu)?qiáng)調(diào)一下，它不僅僅針對(duì)FormPanel，而是對(duì)于所有容器組件都是這樣。不妨看一個(gè)例子，我覺(jué)得大家經(jīng)?？吹竭@樣的代碼：
以至于很多初學(xué)者認(rèn)為像上面的代碼不能夠?qū)懗上旅娴男问剑?
其實(shí)這是對(duì)于xtype不太了解的原因。Ext中xtype和Class（類）是一一對(duì)應(yīng)的，所以既然上面items中是panel對(duì)象，那么就有對(duì)應(yīng)的xtype，事實(shí)上我們可以知道它對(duì)應(yīng)"panel"，那么既然是這樣，上面的代碼當(dāng)然可以寫成第第一種存在形式：
事實(shí)上從本質(zhì)上來(lái)講上面兩種情況是一樣的，只是表現(xiàn)形式不同而已，那么對(duì)于上面的代碼如何用第二種方式呢，你會(huì)問(wèn)，像 {fieldLabel:'用戶名',xtype:'textfield',//Ext基本類型，也可以用其對(duì)應(yīng)的form元素代替name:'userName',id:'userName'//width:100} 這樣的代碼是什么對(duì)象呢？其實(shí)它對(duì)應(yīng)的是"Ext.form.TextField"。這里放上一張對(duì)應(yīng)表：
|
xtype |
類 |
|
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形式好了）：
上面這個(gè)例子很簡(jiǎn)單（不太好看，因?yàn)榈竭@里還沒(méi)有說(shuō)到form中相關(guān)控件，所以沒(méi)有在布局上花功夫），也很容易理解，就是Radio控件嗎。但是我修改過(guò)inputType之后呢：
可以說(shuō)上面的代碼如果對(duì)于初學(xué)者來(lái)說(shuō)肯定想不到一個(gè)radio變成了textfield，另一個(gè)變成了file。不是創(chuàng)建的Radio對(duì)象嗎？怎么成了其他的控件，這個(gè)就是Ext中inputType的特殊之處。
好了，就先到這里吧！
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
