Ext.form.FieldSet字段集

来源：互联网发布：人工蜂群算法matlab 编辑：程序博客网时间：2024/05/21 17:46

Ext.form.FieldSet字段集

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

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

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>

效果图：

分类: ExtJS

0 0