Ext js FormPanel is not showing panel items when toolbar is present

Question

I seem to be having a weird issue here. An extended component has the following code:

MyApp.panels.RelationshipDetails = Ext.extend(Ext.FormPanel, {
    closable: true,
    relationshipId: null,
    documentId: null,
    title: 'Relationship',
    initComponent: function () {
        if (!this.verifyRequiredData()) {
            MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
            return;
        }

        // Build components
        this.tbar = this.buildToolbar();
        this.items = this.buildDetailItemArray();

        MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
    },

    verifyRequiredData: function () {
        // Verification code here
    },

    buildDetailItemArray: function () {
        return [{
            xtype: 'fieldset',
            title: 'Details',
            collapsible: true,
            autoHeight: true,
            items: [{
                xtype: 'hidden',
                name: 'Id'
            }, {
                xtype: 'textfield',
                fieldLabel: 'Name',
                name: 'Name'
            }, {
                xtype: 'textfield',
                fieldLabel: 'Description',
                name: 'Description'
            }, {
                xtype: 'button',
                text: 'Save',
                name: 'saveButton'
            }]
        }];
    },

    buildToolbar: function () {
        return new Ext.Toolbar({
            // Toolbar Config
        });
    }
});

The issue is that when this panel renders, the toolbar is the only thing that renders. Through debugging I can see that BuildDetailItemArray() is being called correctly and returning the correct result.

It gets even weirder when I comment out the this.tbar = line, because when the toolbar is not present, the fieldset and field renders correctly. This occurs even if I extend Panel instead of FormPanel. I also tried abstracting out the form fields into it's own component, and the same thing occurs.

Anyone have any idea why this doesn't seem to work?

Answer 1

What sort of layout are you trying to put this panel into? Also, are you setting a height for this panel?

Often, if you aren't specifying a height for the component to be added (in your case, this panel), or you're not setting an anchor if using an AnchorLayout, component content won't be shown, but the toolbar still will.

It'd be good to know the context of this panel in your overall layout.