[ExtJS5学习笔记]第十九节 Extjs5中通过设置form.Panel的FieldSet集合属性控制多个field集合

本文地址：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
        }]
    }]
});