[ExtJS5學習筆記]第十九節 Extjs5中通過設定form.Panel的FieldSet集合屬性控制多個field集合

標籤：extjs5 sushengmiyan

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

[ExtJS5學習筆記]第十九節 Extjs5中通過設定form.Panel的FieldSet集合屬性控制多個field集合