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
不帶樣式渲染面板。