Question

I’m trying to nest a FormPanel inside another FormPanel. It seems that any field in the nested panel is never rendered.

This screenshot is produced by the code below it:

TabItem tabItem = new TabItem("Tab Item");

FormPanel formPanel = new FormPanel();
formPanel.setHeading("Form Panel");
formPanel.setFrame(true);

TextField textField = new TextField();
textField.setFieldLabel("Text Field");

FormPanel nestedPanel = new FormPanel();
nestedPanel.setHeading("Nested Panel");

TextField nestedField = new TextField();
nestedField.setFieldLabel("Nested Field");

nestedPanel.add(nestedField);

TextField anotherField = new TextField();
anotherField.setFieldLabel("Another Field");

formPanel.add(textField);
formPanel.add(nestedPanel);
formPanel.add(anotherField);

tabItem.add(formPanel);
tabPanel.add(tabItem);

Can anyone explain why the nested field does not show in the nested panel?

I’ve also tried using a CaptionPanel instead of a FormPanel as the nested panel, but the caption panel does not show the field label.

Any suggestions as to how I can get this to work would be most welcome. Thank you 🙂

Answer 1

As Jason mentioned, <form> cannot be nested. The GXT FormPanel draws a form as part of how it works, so consider drawing this layout in another way.

To emulate the appearance of the FormPanel, there are two basic steps.

• To get the header, border, create a ContentPanel, and add the content to that
• To get the GXT 2 layout of drawing the field labels, use a FormLayout in the content panel.

This will look something like this (from your example)

//...
ContentPanel nestedPanel = new ContentPanel(new FormLayout();
nestedPanel.setHeading("Nested Panel");

TextField nestedField = new TextField();
nestedField.setFieldLabel("Nested Field");

nestedPanel.add(nestedField);
//...

The outer field will still manage any binding, and the nested field will look as if they were in a FormPanel. If not using other features of the FormPanel, it may in general make more sense to use a ContentPanel (or LayoutContainer, if you don’t want the border/header) with a FormLayout.