View Full Version : Footer no longer shows on dynamic FormPanel items

17 Jan 2011, 1:08 PM
Hoping to be told to rtfm. Or at least maybe this post will act as a verbal walkthrough to help me to solve what must surely be a configuration oversight...

Summary: A previously rendered FormPanel footer (containing submit button) does not display after FormPanel.add() and FormPanel.doLayout(). Container.add() doc is pretty clear. And a browser resize event causes the footer to appear after Container.add().

I've created a Viewport whose layout is border. It has two items one of which is xtype tabpanel whose region is center. This tabpanel remains with the default layout of CardLayout. Everything is fine.

In the TabPanel, I have a tab of xtype panel whose layout is fit. And its sole item is a FormPanel. Eventually I will have more than one component in this tab, so its default ContainerLayout is good enough for now. Everything is so far fine.

The FormPanel is initially instantiated with no items. When the 'tab' of the TabPanel is selected, the FormPanel displays properly showing no items (form fields). And it does show the header and footer with buttons as configured and expected.

However, the FormPanel footer disappears if items are dynamically added after the FormPanel has been initially rendered (by selecting the 'tab' of the TabPanel that contains the FormPanel). The FormPanel footer obligingly re-appears when the browser is resized.

doLayout() you say? That would seem to be the culprit. However, invoking doLayout() on the FormPanel after dynamically adding items does not eliminate the disappearing footer issue. The newly added fields do appear, but the footer disappears until a browser resize event.

AFAIK every object in the hierarchy has a layout manager, and after altering contained components, doLayout() on the FormPanel does not cause the footer to show properly (even though it is there, and shows on a browser resize).

Here are some code fragments (I deleted much of the code, so it may be unbalanced). I'd prefer to remain verbal and get the Ext JS concepts straight vs receive an unexplained solution. But here they are...

var theFormPanel = new Ext.FormPanel(
items:[], // dynamically added
text : 'Save',
handler: function() {...}
text : 'Reset',
handler: function() {...}

var viewport = new Ext.Viewport({
layout: 'border',
items: [
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
xtype: 'panel',
layout: 'fit',
items: [

theFormPanel.removeAll(); // not causitive

new Ext.form.DateField({...}),
new Ext.form.DateField({...})

//viewport.doLayout(true, true);

17 Jan 2011, 1:46 PM