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