亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

ExtJs之FormPanel篇

系統 2116 0

表單時是web中常見的元素,Ext中的表單也是特別豐富的,接下來我們一塊看看表單的相關內容。

還是先看一下代碼和效果:

ExtJs之FormPanel篇

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的特殊之處。

好了,就先到這里吧!

ExtJs之FormPanel篇


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

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

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 黄页在线播放网址 | 五月婷婷综合在线 | 色老头xxxwww作爱视频 | 亚州激情视频在线播放 | 亚洲精品国产一区二区 | 欧美日韩亚洲国内综合网香蕉 | 久久精品国产欧美日韩亚洲 | 99热在线免费播放 | 亚洲一区在线日韩在线深爱 | 精品乱久久| 色中文字幕| 99精品国产费观看视频 | 四虎成人精品国产一区a | 性生大片一级毛片免费观看 | 四虎影视1515hh四虎免费 | 9re视频这里只有精品 | 性感美女香蕉视频 | 国产网红在线视频 | 99精品国产一区二区青青牛奶 | 91精品国产91久久久久 | 日本裤袜xxxx视频 | 免费激情片 | 免费一级黄色片 | 国产毛片一级国语版 | 日韩精品一区二区三区免费视频 | 久久久久综合精品福利啪啪 | 国产精品久久久一区二区三区 | 亚洲精品96欧美一区二区 | 一级毛片高清 | 中文一级黄色片 | 九九久久精品国产 | 亚洲精品免费在线视频 | 欧美成人免费夜夜黄啪啪 | 国产欧美日韩精品第三区 | 久久精品视频在线播放 | 成人久久18免费网站 | 亚洲欧美日韩精品高清 | 欧美日韩激情在线 | 国产精品久久久久无码av | 久久国产精品一区二区 | 久热996re这里有精品 |