Extjs中FieldSet的收缩和展开实例

浏览数：28 / 时间：2015年06月09日

Extjs中FieldSet的收缩和展开实例:

FieldSet表单控件属于Ext.form.FieldSet的类，继承自：Ext.Panel，表示对某一组字段的标准容器，其中最主要的一个功能就是收缩和展开收缩与展开demo：

  items: [
	id:'check_email_hacklog_send',
        xtype: 'fieldset',
        height:'auto',
        checkboxToggle: true,
        checkboxName: 'enable_email_hacklog_send',
        title: EmailAlertMsg.enable_email_hacklog_send_box + '（备注：SSDDSDSDSDSDSDSDSDSD）',
        collapsed: true,
        collapsedCls:'emailhacklogcss',
	items[{...}]
	]

效果切换显示

技术分享

以下说明来自官方文档及网络：

Extjs的Fieldset控件中有一个属性checkboxToggle

这个属性在设置为true的时候，fieldset在title就会多出一个checkbox，当勾选这个checkbox时，这个fieldset就会展开和收缩

还有两个配合的属性：onCheckClick和checkboxName属性, onCheckClick属性是一个函数，用来替代默认的收缩/展开函数，外加上checkboxName，可以在onCheckClick函数中知道checkbox的勾选情况，从而来做一些事情，如：如果fieldset里面是一个CheckBoxGroup,那么可以根据fieldset的checkBox情况，来全选checkBoxGroup。

此外还有一个属性是collapsible，这个也是用来做展开和收缩的与checkboxToggle不同的是，这个出来的是一个小三角

这两个收缩/展开属性可以同时为true，当它们同时为true时，checkbox和小三角会同时出现

Extjs中FieldSet其它属性和方法：

    1、labelWidth : Number

    标签的宽度，该属性会影响下级的子容器。

    2、itemCls : String

    关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。此组件只有在Ext.form.FormLayout FormLayout布局管理器控制的容器下渲染才有用。

    3、baseCls : String

    作用在面板元素上的CSS样式类（默认为 ‘x-panel‘）。

    4、layout : String

    此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定#layoutConfig进一步配置。

    5、animCollapse : Boolean

    True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。

    6、applyTo : Mixed

    节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由#renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。

  7、frame : Boolean

    True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。

    8、border : Boolean

    True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在#bodyBorder中进一步设置

    9、bodyBorder : Boolean

    True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有#border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。

   10、titleCollapse : Boolean

    True表示为允许单击头部区域任何一个位置都可收缩面板（当#collapsible = true）反之只允许单击工具按钮（默认为false）。

    11、autoScroll : Boolean

    True表示为在面板body元素上，设置overflow：‘auto‘和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。

    12、floating : Boolean

    True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。
设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);）若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。该属性也可以是创建那个Ext.Layer对象所用的配置项对象。

    13、shadow : Boolean/String

    True 表示为（或一个有效Ext.Shadow#mode值）在面板后显示投影效果（默认为‘sides‘四边）。注意此项只当floating = true时有效。

    14、shadowOffset : Number

    投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。

    15、contentEl : String

    用现有HTML节点的内容作为面板body的内容（缺省为‘‘）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比#html HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。

    16、draggable : Boolean

    虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为：

    17、tabTip : String

    tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。

   18、disabled : Boolean

    渲染该组件为禁用状态的（默认为false）。

    19、autoHeight : Boolean

    True表示为使用height:‘auto‘，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的‘auto‘ height都有效。 autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。

    20、collapsedCls : String

    当面板闭合时，面板元素的CSS样式类（默认为 ‘x-panel-collapsed‘）。

    21、headerAsText : Boolean

True表示为显示面板头部的标题（默认为 true）。

    22、buttonAlign : String

    在此面板上的按钮的对齐方式,有效值是‘right,‘ ‘left‘ and ‘center‘（默认为 ‘right‘）。

    23、collapsed : Boolean

    True 表示为渲染面板后即闭合（默认为false）。

    24、collapseFirst : Boolean

    True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。

    25、minButtonWidth : Number

    此面板上按钮的最小宽度（默认为75）。

    26、layoutConfig : Object

    选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与#layout配置联合使用）有关不同类型布局有效的完整配置信息，

    参阅对应的布局类：

    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

    27、items : Mixed

    一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Component#xtype属性进行配置。要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。

    28、defaults : Object

    应用在全体组件上的配置项对象，无论组件是由#items指定，抑或是通过#add、#insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”，假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:‘padding:15px‘}。

    29、hideBorders : Boolean

    True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。