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 :)
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.
ContentPanel
, and add the content to thatFormLayout
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.