一、Ext.form.FieldSet的常用配置項(xiàng)：

1、checkboxToggle : Mixed

True表示在lengend標(biāo)簽之前fieldset的范圍內(nèi)渲染一個(gè)checkbox，或者送入一個(gè)DomHelper的配置對(duì)象制定 checkbox（默認(rèn)為false）。選擇該checkbox會(huì)為展開(kāi)、收起該面板服務(wù)。

2、checkboxName : String

分配到fieldset的checkbox的名稱(chēng)，在#checkboxToggle = true的情況有效。（默認(rèn)為'[checkbox id]-checkbox'）。

3、labelWidth : Number

標(biāo)簽的寬度，該屬性會(huì)影響下級(jí)的子容器。

4、itemCls : String

關(guān)于容器的表單項(xiàng)元素的額外的CSS樣式（默認(rèn)為""，如容器的itemCls有設(shè)置的話(huà)就用那個(gè)值）。由于該樣式是作用于整個(gè)條目容器的，這就會(huì)對(duì)在內(nèi)的表單字段、label元素（若有指定）或其他元素只要屬于條目?jī)?nèi)的元素都有效。此組件只有在Ext.form.FormLayout FormLayout布局管理器控制的容器下渲染才有用。

5、baseCls : String

作用在面板元素上的CSS樣式類(lèi) （默認(rèn)為 'x-panel'）。

6、layout : String

7、此容器所使用的布局類(lèi)型。如不指定，則使用缺省的Ext.layout.ContainerLayout類(lèi)型。 當(dāng)中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。 針對(duì)所選擇布局類(lèi)型，可指定#layoutConfig進(jìn)一步配置。

8、animCollapse : Boolean

True 表示為面板閉合過(guò)程附有動(dòng)畫(huà)效果（默認(rèn)為true，在類(lèi) Ext.Fx 可用的情況下）。

9、bodyCfg : Object

構(gòu)成面板#body元素的Ext.DomHelper DomHelper配置對(duì)象。

這可能會(huì)對(duì)body元素采用另外一套的結(jié)構(gòu)。例如使用<center> 元素就代表將其中內(nèi)容都居中顯示。

10、headerCfg : Object

面板#header元素的結(jié)構(gòu)，符合Ext.DomHelper DomHelper配置的格式。

11、footerCfg : Object

面板#footer元素的結(jié)構(gòu)，符合Ext.DomHelper DomHelper配置的格式。

12、applyTo : Mixed

節(jié)點(diǎn)的id,或是DOM節(jié)點(diǎn)，又或者是與DIV相當(dāng)?shù)默F(xiàn)有元素，這些都是文檔中已經(jīng)存在的元素當(dāng)使用applyTo后，主元素所指定的id或CSS樣式類(lèi)將會(huì)作用于組件構(gòu)成的部分，而被創(chuàng)建的組件將會(huì)嘗試著根據(jù)這些markup構(gòu)建它的子組件。使用了這項(xiàng)配置后，不需要執(zhí)行render()的方法。 若指定了applyTo，那么任何由#renderTo傳入的值將會(huì)被忽略并使用目標(biāo)元素的父級(jí)元素作為組件的容器。

13、tbar : Object/Array

面板頂部的工具條。 此項(xiàng)可以是Ext.Toolbar的實(shí)例、工具條的配置對(duì)象，或由按鈕配置項(xiàng)對(duì)象構(gòu)成的數(shù)組，以加入到工具條中。 注意，此項(xiàng)屬性渲染過(guò)后就不可用了，應(yīng)使用#getTopToolbar的方法代替。

14、bbar : Object/Array

面板底部的工具條。 此項(xiàng)可以是Ext.Toolbar的實(shí)例、工具條的配置對(duì)象，或由按鈕配置項(xiàng)對(duì)象構(gòu)成的數(shù)組，以加入到工具條中。 注意，此項(xiàng)屬性渲染過(guò)后就不可用了，應(yīng)使用#getBottomToolbar的方法代替。

15、header : Boolean

True表示為顯式建立頭部元素，false則是跳過(guò)創(chuàng)建。 缺省下，如不創(chuàng)建頭部，將使用#title的內(nèi)容設(shè)置到頭部去，如沒(méi)指定title則不會(huì)。 如果設(shè)置好title，但頭部設(shè)置為false，那么頭部亦不會(huì)生成。

16、footer : Boolean

True表示為顯式建立底部元素，false則是跳過(guò)創(chuàng)建。缺省下，就算不聲明創(chuàng)建底部，若有一個(gè)或一個(gè)以上的按鈕加入到面板的話(huà)，也創(chuàng)建底部，不指定按鈕就不會(huì)生成。

17、title : String

顯示在面板頭部的文本標(biāo)題(默認(rèn)為'')。 如有指定了titile那么頭部元素(head)會(huì)自動(dòng)生成和顯示，除非#header強(qiáng)制設(shè)為false。如果你不想在寫(xiě)配置時(shí)指定好title，不過(guò)想在后面才加入的話(huà)，你必須先指定一個(gè)非空的標(biāo)題（具體說(shuō)是空白字符''亦可或header：true），這樣才保證容器元素生成出來(lái)。

18、buttons : Array

在面板底部加入按鈕，Ext.Button配置的數(shù)組。

19、autoLoad : Object/String/Function

一個(gè)特定的url反饋到Updater的Ext.Updater#update方法。 若autoLoad非null，面板會(huì)嘗試在渲染后立即加載內(nèi)容。 同時(shí)該面板#body元素的默認(rèn)URL屬性就是這URL，所以可隨時(shí)調(diào)用Ext.Element#refresh refresh的方法。

20、frame : Boolean

True表示為面板的邊框外框可自定義的，false表示為邊框可1px的點(diǎn)線（默認(rèn)為false）。

21、border : Boolean

True表示為顯示出面板body元素的邊框，false則隱藏（缺省為true），默認(rèn)下，邊框是一套2px寬的內(nèi)邊框，但可在#bodyBorder中進(jìn)一步設(shè)置

22、bodyBorder : Boolean

True表示為顯示出面板body元素的邊框，false則隱藏（缺省為true），只有#border == true時(shí)有效。 若border == true and bodyBorder == false，邊框則為1px寬，可指定整個(gè)body元素的內(nèi)置外觀。

23、bodyStyle : String/Object/Function

制定body元素的CSS樣式。格式形如Ext.Element#applyStyles（缺省為null）。

24、iconCls : String

一個(gè)能提供背景圖片的CSS樣式類(lèi)，用于面板頭部的圖標(biāo)：（默認(rèn)為''）。

25、collapsible : Boolean

True表示為面板是可收縮的，并自動(dòng)渲染一個(gè)展開(kāi)/收縮的輪換按鈕在頭部工具條。 false表示為保持面板為一個(gè)靜止的尺寸（缺省為false）

26、tools : Array

一個(gè)按鈕配置組成的數(shù)組，加入到頭部的工具條區(qū)域。 渲染過(guò)程中，每一項(xiàng)工具都保存為Ext.Element Element對(duì)象，都集中保存在屬性tools.<tool-type>之中。

27、toolTemplate : Ext.Template/Ext.XTemplate

位于#header中的tools其模板是什么。默認(rèn)是：

28、hideCollapseTool : Boolean

True表示為不出 展開(kāi)/收縮的輪換按鈕，當(dāng)#collapsible = true，false就顯示（默認(rèn)為false）。

29、titleCollapse : Boolean

True表示為允許單擊頭部區(qū)域任何一個(gè)位置都可收縮面板（當(dāng)#collapsible = true）反之只允許單擊工具按鈕（默認(rèn)為false）。

30、autoScroll : Boolean

True表示為在面板body元素上，設(shè)置overflow：'auto'和出現(xiàn)滾動(dòng)條false表示為裁剪所有溢出的內(nèi)容（默認(rèn)為false）。

31、floating : Boolean

True表示為浮動(dòng)此面板（帶有自動(dòng)填充和投影的絕對(duì)定位），false表示為在其渲染的位置"就近"顯示（默認(rèn)為false）。

設(shè)置floating為true，將會(huì)在面板元素的基礎(chǔ)上創(chuàng)建一個(gè)Ext.Layer 同時(shí)讓面板顯示到非正數(shù)的坐標(biāo)上去了，不能正確顯示。因此面板必須精確地設(shè)置渲染后的位置，也就是使用絕對(duì)的定位方式。（如：myPanel.setPosition(100,100);）若一個(gè)浮動(dòng)面板是沒(méi)有固定其寬度的，這導(dǎo)致面板會(huì)填滿(mǎn)與視圖右方的區(qū)域。

該屬性也可以是創(chuàng)建那個(gè)Ext.Layer對(duì)象所用的配置項(xiàng)對(duì)象。

32、shadow : Boolean/String

True 表示為（或一個(gè)有效Ext.Shadow#mode值）在面板后顯示投影效果（默認(rèn)為'sides'四邊）。 注意此項(xiàng)只當(dāng)floating = true時(shí)有效。

33、shadowOffset : Number

投影偏移的象素值（默認(rèn)為4）。注意此項(xiàng)只當(dāng)floating = true時(shí)有效。

34、shim : Boolean

False表示為禁止用iframe填充，有些瀏覽器可能需要設(shè)置（默認(rèn)為true）。 注意此項(xiàng)只當(dāng)floating = true時(shí)有效

35、html : String/Object

一段HTML片段，或Ext.DomHelper DomHelper配置項(xiàng)作為面板body內(nèi)容（默認(rèn)為 ''）。 面板的afterRender方法負(fù)責(zé)HTML內(nèi)容的加入這一過(guò)程

，所以render事件觸發(fā)的時(shí)刻document還沒(méi)有所說(shuō)的HTML內(nèi)容。 該部分的內(nèi)容又比#contentEl的顯示位置而居前。

36、contentEl : String

用現(xiàn)有HTML節(jié)點(diǎn)的內(nèi)容作為面板body的內(nèi)容（缺省為''）。 面板的afterRender方法負(fù)責(zé)了此HTML元素的加入到面板body中去。 該部分的內(nèi)容又比#html HTML的顯示位置而居后，所以render事件觸發(fā)的時(shí)刻document還沒(méi)有所說(shuō)的HTML內(nèi)容。

37、keys : Object/Array

KeyMap的配置項(xiàng)對(duì)象（格式形如:Ext.KeyMap#addBinding）。 可用于將key分配到此面板（缺省為null）。

38、draggable : Boolean

雖然Ext.Panel.DD是一個(gè)內(nèi)部類(lèi)并未歸檔的，但亦可自定義拖放（drag/drop）的實(shí)現(xiàn)，具體做法是傳入一個(gè)Ext.Panel.DD的配置代替true值。 它是Ext.dd.DragSource的子類(lèi)，所以可在實(shí)現(xiàn)Ext.dd.DragDrop的接口方法的過(guò)程中加入具體行為：

39、tabTip : String

tooltip的innerHTML字符串（也可以html標(biāo)簽），當(dāng)鼠標(biāo)移至tab時(shí)會(huì)顯示。 這時(shí)Ext.Panel充當(dāng)?shù)慕巧?Ext.TabPanel某一子面板。記得Ext.QuickTips.init()必須初始化好。

40、disabled : Boolean

渲染該組件為禁用狀態(tài)的（默認(rèn)為false）。

41、autoHeight : Boolean

True表示為使用height:'auto'，false表示為使用固定高度（缺省為false）。 注意：盡管許多組件都會(huì)繼承該配置選項(xiàng)，但是不是全部的'auto' height都有效。 autoHeight:true的設(shè)定表示會(huì)依照元素內(nèi)容自適應(yīng)大小，Ext就不會(huì)過(guò)問(wèn)高度的問(wèn)題。

42、collapsedCls : String

當(dāng)面板閉合時(shí)，面板元素的CSS樣式類(lèi) （默認(rèn)為 'x-panel-collapsed'）。

43、maskDisabled : Boolean

True表示為當(dāng)面板不可用時(shí)進(jìn)行遮罩（默認(rèn)為true）。 當(dāng)面板禁用時(shí)，總是會(huì)告知下面的元素亦要禁用，但遮罩是另外一種方式同樣達(dá)到禁用的效果。

44、headerAsText : Boolean

True表示為顯示面板頭部的標(biāo)題（默認(rèn)為 true）。

45、buttonAlign : String

在此面板上的按鈕的對(duì)齊方式,有效值是'right,' 'left' and 'center'（默認(rèn)為 'right'）。

46、collapsed : Boolean

True 表示為渲染面板后即閉合（默認(rèn)為false）。

47、collapseFirst : Boolean

True 表示為展開(kāi)/閉合的輪換按鈕出現(xiàn)在面板頭部的左方,false表示為在右方（默認(rèn)為true）。

48、minButtonWidth : Number

此面板上按鈕的最小寬度（默認(rèn)為75）。

49、unstyled : Boolean

不帶樣式渲染面板。

50、elements : String

面板渲染后，要初始化面板元素的列表，用逗號(hào)分隔開(kāi)。正常情況下，該列表會(huì)在面板讀取配置的時(shí)候就自動(dòng)生成，假設(shè)沒(méi)有進(jìn)行配置，但結(jié)構(gòu)元素有更新渲染的情況下，就可根據(jù)指值得知結(jié)構(gòu)元素是否已渲染的（例如，你打算在面板完成渲染后動(dòng)態(tài)加入按鈕或工具條）。加入此列表中的這些元素后就在渲染好的面板中分配所需的載體（placeholders）。 有效值是：

header

tbar (top bar)

body

bbar (bottom bar)

footer

缺省為'body'. Defaults to 'body'.

51、monitorResize : Boolean

Ture表示為自動(dòng)監(jiān)視window resize的事件，以處理接下來(lái)一切的事情，包括對(duì)視見(jiàn)區(qū)（viewport）當(dāng)前大小的感知，一般情況該值由#layout調(diào)控，而無(wú)須手動(dòng)設(shè)置。

52、layoutConfig : Object

選定好layout布局后，其相應(yīng)的配置屬性就在這個(gè)對(duì)象上進(jìn)行設(shè)置。 （即與#layout配置聯(lián)合使用）有關(guān)不同類(lèi)型布局有效的完整配置信息，參閱對(duì)應(yīng)的布局類(lèi)：

Ext.layout.Absolute

Ext.layout.Accordion

Ext.layout.AnchorLayout

Ext.layout.BorderLayout

Ext.layout.CardLayout

Ext.layout.ColumnLayout

Ext.layout.FitLayout

Ext.layout.FormLayout

Ext.layout.TableLayout

53、bufferResize : Boolean/Number

當(dāng)設(shè)置為true（100毫秒）或輸入一個(gè)毫秒數(shù)，為此容器所分配的布局會(huì)緩沖其計(jì)算的頻率和緩沖組件的重新布局。如容器包含大量的子組件或這樣重型容器，在頻繁進(jìn)行高開(kāi)銷(xiāo)的布局時(shí)，該項(xiàng)尤為有用。

54、activeItem : String/Number

組件id的字符串，或組件的索引，用于在容器布局渲染時(shí)候的設(shè)置為活動(dòng)。

55、items : Mixed

一個(gè)單獨(dú)項(xiàng)，或子組件組成的數(shù)組，加入到此容器中。 每一項(xiàng)的對(duì)象類(lèi)型是基于Ext.Component的

你可傳入一個(gè)組件的配置對(duì)象即是lazy-rendering的做法，這樣做的好處是組件不會(huì)立即渲染，減低直接構(gòu)建組件對(duì)象帶來(lái)的開(kāi)銷(xiāo)。 要發(fā)揮"lazy instantiation延時(shí)初始化"的特性，應(yīng)對(duì)組件所屬的登記類(lèi)型的Ext.Component#xtype屬性進(jìn)行配置。

要了解所有可用的xtyps，可參閱Ext.Component。如傳入的單獨(dú)一個(gè)項(xiàng)，應(yīng)直接傳入一個(gè)對(duì)象的引用（ 如items: {...}）。多個(gè)項(xiàng)應(yīng)以數(shù)組的類(lèi)型傳入（如items: [{...}, {...}]）。

56、defaults : Object

應(yīng)用在全體組件上的配置項(xiàng)對(duì)象，無(wú)論組件是由#items指定，抑或是通過(guò)#add、#insert的方法加入，都可支持。 缺省的配置可以是任意多個(gè)容器能識(shí)別的“名稱(chēng)/值”， 假設(shè)要自動(dòng)為每一個(gè)Ext.Panel項(xiàng)設(shè)置padding內(nèi)補(bǔ)丁，你可以傳入defaults: {bodyStyle:'padding:15px'}。

57、autoDestroy : Boolean

若為true容器會(huì)自動(dòng)銷(xiāo)毀容器下面全部的組件，否則的話(huà)必須手動(dòng)執(zhí)行銷(xiāo)毀過(guò)程（默認(rèn)為true）。

58、hideBorders : Boolean

True表示為隱藏容器下每個(gè)組件的邊框，false表示保留組件現(xiàn)有的邊框設(shè)置（默認(rèn)為false）。

59、defaultType : String

容器的默認(rèn)類(lèi)型，用于在Ext.ComponentMgr中表示它的對(duì)象。（默認(rèn)為'panel'）

二、Ext.form.FieldSet示例

<html>
<head runat="server">
    <title>Ext.form.field.FieldSet示例</title>
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create("Ext.form.Panel", {
                title: "Ext.form.field.FieldSet示例",
                frame: true,
                width: 220,
                renderTo: Ext.getBody(),
                bodyPadding: 5,
                items: [{
                    title: "商品信息",
                    xtype: "fieldset",
                    bodyPadding: 5,
                    collapsible: true,
                    defaults: {
                        labelSeparator: "：",
                        labelWidth: 65,
                        width: 175
                    },
                    defaultType: "textfield",
                    items: [{
                        fieldLabel: "商品名稱(chēng)"
                    }, {
                        fieldLabel: "單價(jià)"
                    }]
                }, {
                    title: "商品描述",
                    xtype: "fieldset",
                    bodyPadding: 5,
                    checkboxToggle: true,
                    checkboxName: "Description",
                    defaultType: "textfield",
                    items: [{
                        fieldLabel: "簡(jiǎn)介",
                        labelSeparator: "：",
                        labelWidth: 65,
                        width: 175,
                        xtype: "textarea"
                    }]
                }]
            });
        });
    </script>
</head>
<body>
</body>
</html>

Ext.form.FieldSet示例效果圖：