PDA

View Full Version : FormPanel is not displaying fieldset and fields



KallDrexx
14 Dec 2010, 6:32 PM
I'm confused on why my formPanel won't render the fieldset or the fields. When I add this to my TabPanel, I am correctly seeing the tab with the title set, toolbar rendered correctly, but nothing else. Through Chrome's debugger I have verified that buildDetailItemArray() is being called, so I am confused as to what I am doing wrong.



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
});
}
});

KallDrexx
15 Dec 2010, 8:25 PM
After doing more debugging I am even more confused.

If I comment out the this.tbar line, the items show correctly. As long as this.tbar is being set though, the form does not show. Anyone have any insight into why?

KallDrexx
16 Dec 2010, 7:17 PM
If anyone is interested, this issue was caused because my Panel had no height specified. By adding autoHeight: true into the config, everything works correctly!