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>

效果图：

posted @ 2012-04-22 23:49  libingql  阅读(7437)  评论(0)  编辑  收藏  举报