本文地址：http://blog.csdn.net/sushengmiyan/article/details/39209533

官方例子:http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.FieldSet

本文作者：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

        }]

    }]

});