Embedding a FormPanel in another FormPanel

Often I want to create a pre-configured class to encapsulate some form fields in a reusable way. When doing this, however, you cannot extent Ext.FormPanel - if you do this and then try to embed your class in an existing FormPanel you’ll get an obscure error deep in the bowels of ExtJS. :(

Instead, extend Ext.Panel, and then create a FormPanel inside your panel. For example, here’s a simple “LocationPanel” that displays a Campus and Building labels. Note that the class extends Ext.Panel, and then embeds a ‘form’ xtype, and the form fields are inside that…

    LocationPanel = Ext.extend(Ext.Panel, {
        campus: 'defaultCampus',
        building: 'defaultBuilding',

        width: 300,
        height: 50,
        frame: true,
        border: true,
        labelWidth: 75,
        title: 'Location Panel',

        initComponent: function(){
            Ext.apply(this, {
                items: [{
                layout: 'form',
                    items: [{
                        layout: 'column',
                        items: [{
                            columnWidth: '.5',
                            layout: 'form',
                            items: [{
                                    xtype: 'label',
                                    text: this.campus
                            }]
                        }, {
                            columnWidth: '.5',
                            layout: 'form',
                            items: [{
                                    xtype: 'label',
                                    text: this.building
                            }]
                        }]
                    }]
                }]
            });
            LocationPanel.superclass.initComponent.apply(this, arguments);
        }
    });
    Ext.reg('location_panel', LocationPanel);