Ext.FieldSet

 Ext學習系列(5)-- <wbr>Ext.FieldSet

1、Ext.FieldSet參數內容

FieldSet組件,它繼承自panel.其中屬性可參考panel。

checkboxToggle : bool

True表示在lengend標籤之前fieldset的範圍內渲染一個checkbox,或者送入一個DomHelper的配置對象制定 checkbox(默認爲false)。選擇該checkbox會爲展開、收起該面板服務。 

參數內容放到後面

例:

  Ext.onReady(function() {
            var L1 = new Ext.form.FormPanel({
                width: 400,
                height: 400,
                renderTo: "divID1",
                title: "FieldSet",
                frame: true,
                items: [
                //FieldSet例1
                new Ext.form.FieldSet({
                    title: "FieldSet例1",
                    width: 380,
                    height: 100,
                    checkboxToggle: true//true則呈現一個帶checkbox的fieldset,選中則展開,否則相反,默認爲false
                }),

 

                // 單選按鈕組
                new Ext.form.FieldSet({
                    title: "單選按鈕組",
                    width: 380,
                    height: 100,
                    checkboxToggle: true,
                    items: [
                    new Ext.form.Radio({ boxLabel: "單選1", id: "Radio1", name: "a" }),
                    new Ext.form.Radio({ boxLabel: "單選2", id: "Radio2", name: "a", checked: true })

                    ]
                }),

 

 

                //多選按鈕組
                new Ext.form.FieldSet({
                    title: "多選按鈕組",
                    width: 380,
                    height: 100,
                    checkboxToggle: true,
                    items: [
                    new Ext.form.Checkbox({ boxLabel: "多選1" }),
                    new Ext.form.Checkbox({boxLabel:"多選2",id:"checkbox1",checked:true})
                    ]
                })

                ]

 

            });
        });

 

參數:

類全稱: Ext.form.FieldSet

繼承自於: Ext.Panel


針對某一組字段的標準容器。

配置項 

1、checkboxToggle : Mixed

True表示在lengend標籤之前fieldset的範圍內渲染一個checkbox,或者送入一個DomHelper的配置對象制定 checkbox(默認爲false)。選擇該checkbox會爲展開、收起該面板服務。


2、checkboxName : String

分配到fieldset的checkbox的名稱,在#checkboxToggle = true的情況有效。(默認爲'[checkbox id]-checkbox')。


3、labelWidth : Number

標籤的寬度,該屬性會影響下級的子容器。


4、itemCls : String

關於容器的表單項元素的額外的CSS樣式(默認爲"",如容器的itemCls有設置的話就用那個值)。由於該樣式是作用於整個條目容器的,這就會對在內的表單字段、label元素(若有指定)或其他元素只要屬於條目內的元素都有效。此組件只有在Ext.form.FormLayout FormLayout佈局管理器控制的容器下渲染纔有用。


5、baseCls : String

作用在面板元素上的CSS樣式類 (默認爲 'x-panel')。


6、layout : String

7、此容器所使用的佈局類型。如不指定,則使用缺省的Ext.layout.ContainerLayout類型。當中有效的值可以是:accordion、anchor、border、cavd、column、fit、form和table。針對所選擇佈局類型,可指定#layoutConfig進一步配置。

 

8、animCollapse : Boolean

True 表示爲面板閉合過程附有動畫效果(默認爲true,在類 Ext.Fx 可用的情況下)。


9、bodyCfg : Object

構成面板#body元素的Ext.DomHelper DomHelper配置對象。

這可能會對body元素採用另外一套的結構。例如使用<center> 元素就代表將其中內容都居中顯示。


10、headerCfg : Object

面板#header元素的結構,符合Ext.DomHelper DomHelper配置的格式。


11、footerCfg : Object

面板#footer元素的結構,符合Ext.DomHelper DomHelper配置的格式。


12、applyTo : Mixed

節點的id,或是DOM節點,又或者是與DIV相當的現有元素,這些都是文檔中已經存在的元素當使用applyTo後,主元素所指定的id或CSS樣式類將會作用於組件構成的部分,而被創建的組件將會嘗試着根據這些markup構建它的子組件。使用了這項配置後,不需要執行render()的方法。若指定了applyTo,那麼任何由#renderTo傳入的值將會被忽略並使用目標元素的父級元素作爲組件的容器。


13、tbar : Object/Array

面板頂部的工具條。此項可以是Ext.Toolbar的實例、工具條的配置對象,或由按鈕配置項對象構成的數組,以加入到工具條中。注意,此項屬性渲染過後就不可用了,應使用#getTopToolbar的方法代替。


14、bbar : Object/Array

面板底部的工具條。此項可以是Ext.Toolbar的實例、工具條的配置對象,或由按鈕配置項對象構成的數組,以加入到工具條中。注意,此項屬性渲染過後就不可用了,應使用#getBottomToolbar的方法代替。


15、header : Boolean

True表示爲顯式建立頭部元素,false則是跳過創建。缺省下,如不創建頭部,將使用#title的內容設置到頭部去,如沒指定title則不會。如果設置好title,但頭部設置爲false,那麼頭部亦不會生成。


16、footer : Boolean

True表示爲顯式建立底部元素,false則是跳過創建。缺省下,就算不聲明創建底部,若有一個或一個以上的按鈕加入到面板的話,也創建底部,不指定按鈕就不會生成。


17、title : String

顯示在面板頭部的文本標題(默認爲'')。如有指定了titile那麼頭部元素(head)會自動生成和顯示,除非#header強制設爲false。如果你不想在寫配置時指定好title,不過想在後面才加入的話,你必須先指定一個非空的標題(具體說是空白字符''亦可或header:true),這樣才保證容器元素生成出來。


18、buttons : Array

在面板底部加入按鈕,Ext.Button配置的數組。

 

19、autoLoad : Object/String/Function

一個特定的url反饋到Updater的Ext.Updater#update方法。若autoLoad非null,面板會嘗試在渲染後立即加載內容。同時該面板#body元素的默認URL屬性就是這URL,所以可隨時調用Ext.Element#refresh refresh的方法。


20、frame : Boolean

True表示爲面板的邊框外框可自定義的,false表示爲邊框可1px的點線(默認爲false)。


21、border : Boolean

True表示爲顯示出面板body元素的邊框,false則隱藏(缺省爲true),默認下,邊框是一套2px寬的內邊框,但可在#bodyBorder中進一步設置


22、bodyBorder : Boolean

True表示爲顯示出面板body元素的邊框,false則隱藏(缺省爲true),只有#border == true時有效。若border == true and bodyBorder == false,邊框則爲1px寬,可指定整個body元素的內置外觀。


23、bodyStyle : String/Object/Function

制定body元素的CSS樣式。格式形如Ext.Element#applyStyles(缺省爲null)。


24、iconCls : String

一個能提供背景圖片的CSS樣式類,用於面板頭部的圖標:(默認爲'')。


25、collapsible : Boolean

True表示爲面板是可收縮的,並自動渲染一個展開/收縮的輪換按鈕在頭部工具條。 false表示爲保持面板爲一個靜止的尺寸(缺省爲false)


26、tools : Array

一個按鈕配置組成的數組,加入到頭部的工具條區域。 渲染過程中,每一項工具都保存爲Ext.Element Element對象,都集中保存在屬性tools.<tool-type>之中。


27、toolTemplate : Ext.Template/Ext.XTemplate

位於#header中的tools其模板是什麼。默認是:


28、hideCollapseTool : Boolean

True表示爲不出展開/收縮的輪換按鈕,當#collapsible = true,false就顯示(默認爲false)。


29、titleCollapse : Boolean

True表示爲允許單擊頭部區域任何一個位置都可收縮面板(當#collapsible = true)反之只允許單擊工具按鈕(默認爲false)。


30、autoScroll : Boolean

True表示爲在面板body元素上,設置overflow:'auto'和出現滾動條false表示爲裁剪所有溢出的內容(默認爲false)。


31、floating : Boolean

True表示爲浮動此面板(帶有自動填充和投影的絕對定位),false表示爲在其渲染的位置"就近"顯示(默認爲false)。

設置floating爲true,將會在面板元素的基礎上創建一個Ext.Layer 同時讓面板顯示到非正數的座標上去了,不能正確顯示。因此面板必須精確地設置渲染後的位置,也就是使用絕對的定位方式。(如:myPanel.setPosition(100,100);)若一個浮動面板是沒有固定其寬度的,這導致面板會填滿與視圖右方的區域。

該屬性也可以是創建那個Ext.Layer對象所用的配置項對象。


32、shadow : Boolean/String

True 表示爲(或一個有效Ext.Shadow#mode值)在面板後顯示投影效果(默認爲'sides'四邊)。 注意此項只當floating = true時有效。

33、shadowOffset : Number

投影偏移的象素值(默認爲4)。注意此項只當floating = true時有效。


34、shim : Boolean

False表示爲禁止用iframe填充,有些瀏覽器可能需要設置(默認爲true)。 注意此項只當floating = true時有效


35、html : String/Object

一段HTML片段,或Ext.DomHelper DomHelper配置項作爲面板body內容(默認爲 '')。面板的afterRender方法負責HTML內容的加入這一過程


,所以render事件觸發的時刻document還沒有所說的HTML內容。該部分的內容又比#contentEl的顯示位置而居前。


36、contentEl : String

用現有HTML節點的內容作爲面板body的內容(缺省爲'')。面板的afterRender方法負責了此HTML元素的加入到面板body中去。 該部分的內容又比#html HTML的顯示位置而居後,所以render事件觸發的時刻document還沒有所說的HTML內容。


37、keys : Object/Array

KeyMap的配置項對象(格式形如:Ext.KeyMap#addBinding)。可用於將key分配到此面板(缺省爲null)。


38、draggable : Boolean

雖然Ext.Panel.DD是一個內部類並未歸檔的,但亦可自定義拖放(drag/drop)的實現,具體做法是傳入一個Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子類,所以可在實現Ext.dd.DragDrop的接口方法的過程中加入具體行爲:


39、tabTip : String

tooltip的innerHTML字符串(也可以html標籤),當鼠標移至tab時會顯示。 這時Ext.Panel充當的角色是 Ext.TabPanel某一子面板。記得Ext.QuickTips.init()必須初始化好。


40、disabled : Boolean

渲染該組件爲禁用狀態的(默認爲false)。


41、autoHeight : Boolean

True表示爲使用height:'auto',false表示爲使用固定高度(缺省爲false)。注意:儘管許多組件都會繼承該配置選項,但是不是全部的'auto' height都有效。 autoHeight:true的設定表示會依照元素內容自適應大小,Ext就不會過問高度的問題。


42、collapsedCls : String

當面板閉合時,面板元素的CSS樣式類 (默認爲 'x-panel-collapsed')。


43、maskDisabled : Boolean

True表示爲當面板不可用時進行遮罩(默認爲true)。當面板禁用時,總是會告知下面的元素亦要禁用,但遮罩是另外一種方式同樣達到禁用的效果。


44、headerAsText : Boolean

True表示爲顯示面板頭部的標題(默認爲 true)。


45、buttonAlign : String

在此面板上的按鈕的對齊方式,有效值是'right,' 'left' and 'center'(默認爲 'right')。


46、collapsed : Boolean

True 表示爲渲染面板後即閉合(默認爲false)。


47、collapseFirst : Boolean

True 表示爲展開/閉合的輪換按鈕出現在面板頭部的左方,false表示爲在右方(默認爲true)。


48、minButtonWidth : Number

此面板上按鈕的最小寬度(默認爲75)。


49、unstyled : Boolean

不帶樣式渲染面板。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章