[ExtJS5学习笔记]第十九节 Extjs5中通过设置form.Panel的FieldSet集合属性控制多个field集合
最后更新于：2022-04-01 07:37:09
本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39209533](http://blog.csdn.net/sushengmiyan/article/details/39209533)
官方例子:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.FieldSet](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.FieldSet)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each)
本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan)
------------------------------------------------------------------------------------------------------------------------------------
继承关系：
可以清晰的看到，form.Panel是继承自panel.Panel的，FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 Panel中的 Ext.form.field.Field 对象. 可以快捷方便地进行 配置以及处理 BasicForm 和 表单域.
看一下官方给的一个form带着feildset的例子，看这个就会比普通的只有单个field的美观多了：
看一下代码结构：
~~~
Ext.create('Ext.form.Panel', {
title: 'Simple Form with FieldSets',
labelWidth: 75,
url: 'save-form.php',
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 550,
renderTo: Ext.getBody(),
layout: 'column', // arrange fieldsets side by side
items: [{
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',//第一个文本集合
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[{//包含两个field
fieldLabel: 'Field 1',
name: 'field1'
}, {
fieldLabel: 'Field 2',
name: 'field2'
}]
}, {
// Fieldset in Column 2 - collapsible via checkbox, collapsed by default, contains a panel
xtype:'fieldset',
title: 'Show Panel', // title or checkboxToggle creates fieldset header
columnWidth: 0.5,
checkboxToggle: true,
collapsed: true, // fieldset initially collapsed
layout:'anchor',
items :[{
xtype: 'panel',
anchor: '100%',
title: 'Panel inside a fieldset',
frame: true,
height: 52
}]
}]
});
~~~