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

来源：互联网发布：首单免单的外卖软件编辑：程序博客网时间：2024/05/21 22:54

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

0 0