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, 220, renderTo: Ext.getBody(), bodyPadding: 5, items: [{ title: "商品信息", xtype: "fieldset", bodyPadding: 5, collapsible: true, defaults: { labelSeparator: "：", labelWidth: 65, 175 }, defaultType: "textfield", items: [{ fieldLabel: "商品名称" }, { fieldLabel: "单价" }] }, { title: "商品描述", xtype: "fieldset", bodyPadding: 5, checkboxToggle: true, checkboxName: "Description", defaultType: "textfield", items: [{ fieldLabel: "简介", labelSeparator: "：", labelWidth: 65, 175, xtype: "textarea" }] }] }); }); </script> </head> <body> </body> </html>
效果图：
