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