Ext.form.FieldSet字段集

1、Ext.form.FieldSet主要配置项

配置项 类型 说明
checkboxName String 指定字段集中用于展开或隐藏字段集面板的checkbox的名字,该属性只有在checkboxToggle为true是生效
checkboxToggle Boolean 设置是否显示字段集的checkbox选择框,通过设置该选择框可以实现隐藏或显示字段集功能。默认为false
collapsed Boolean 设置为true则字段集默认为折叠状态
collapsible Boolean 设置字段集是否可以折叠
layout String 字段集的布局方式,默认为“anchor”
title String 字段集标题
labelWidth Number 字段标签的宽度,可以级联到子容器

2、Ext.form.FieldSet示例

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Ext.form.field.FieldSet示例</title>

    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>

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

效果图:

Ext.form.FieldSet字段集

你可能感兴趣的:(Field)