表單時是web中常見的元素,Ext中的表單也是特別豐富的,接下來我們一塊看看表單的相關內容。
還是先看一下代碼和效果:
FormPanel也比較好用,但是我認為我們有必要就上面xtype和inputType說幾點。
大家其實很多時候會發現,在Ext組件中(對于所有容器組件[這里就是可以有子組件的組件])items里面基本上有兩種存在形式,一種就是像上面一樣我們直接以Json的形式進行配置;另一種就是既然items中是一個個item,我們可以定義一個對象放到里面,例如假設在一個panel中還有一個子panel,我們就可以直接var pn=new Ext.Panel({…});然后放到items中。上面的話我再強調一下,它不僅僅針對FormPanel,而是對于所有容器組件都是這樣。不妨看一個例子,我覺得大家經常看到這樣的代碼:
以至于很多初學者認為像上面的代碼不能夠寫成下面的形式:
其實這是對于xtype不太了解的原因。Ext中xtype和Class(類)是一一對應的,所以既然上面items中是panel對象,那么就有對應的xtype,事實上我們可以知道它對應"panel",那么既然是這樣,上面的代碼當然可以寫成第第一種存在形式:
事實上從本質上來講上面兩種情況是一樣的,只是表現形式不同而已,那么對于上面的代碼如何用第二種方式呢,你會問,像 {fieldLabel:'用戶名',xtype:'textfield',//Ext基本類型,也可以用其對應的form元素代替name:'userName',id:'userName'//width:100} 這樣的代碼是什么對象呢?其實它對應的是"Ext.form.TextField"。這里放上一張對應表:
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是對應的,當然表單中xtype和class都有inputType屬性,而且最為有意思的是對于form中的元素inputType的取值范圍是一樣的,什么意思呢?我們還看例子(我們直接對上面的代碼精簡好了,這個例子中我們就用class形式好了):
上面這個例子很簡單(不太好看,因為到這里還沒有說到form中相關控件,所以沒有在布局上花功夫),也很容易理解,就是Radio控件嗎。但是我修改過inputType之后呢:
可以說上面的代碼如果對于初學者來說肯定想不到一個radio變成了textfield,另一個變成了file。不是創建的Radio對象嗎?怎么成了其他的控件,這個就是Ext中inputType的特殊之處。
好了,就先到這里吧!
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
