Ext.form.FieldSet怎么用

最新推荐文章于 2023-03-12 21:59:24 发布

jkpi888

最新推荐文章于 2023-03-12 21:59:24 发布

阅读量1.8k

点赞数

分类专栏： extjs 文章标签： extjs layout FieldSet

extjs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章转载于： Ext.form.FieldSet的用法 http://www.studyofnet.com/news/155.html

一、Ext.form.FieldSet的常用配置项：

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）。

二、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: "商品名称"
                    }, {
                        fieldLabel: "单价"
                    }]
                }, {
                    title: "商品描述",
                    xtype: "fieldset",
                    bodyPadding: 5,
                    checkboxToggle: true,
                    checkboxName: "Description",
                    defaultType: "textfield",
                    items: [{
                        fieldLabel: "简介",
                        labelSeparator: "：",
                        labelWidth: 65,
                        width: 175,
                        xtype: "textarea"
                    }]
                }]
            });
        });
    </script>
</head>
<body>
</body>
</html>

效果图：