Ext JS Premium Member
Design pattern for forms
One of the nice aspects of GXT 3.0 is the ability to use more native HTML layout for driving your forms. What is the communities best practice for forms that contain non-dynamic field layouts (ie. the attributes and layout are known by the editor panel).
It seems to me, using a VerticalLayoutContainer or other simple container works well for simple vertical flow panels. If you want multiple fields in a row, or columns or more detailed layouts (which was a column layout and used adapter fields in GXT 2.x) this is done in the examples using the HTMLLayoutContainer and an HTML table used as a template with HtmlData hints.
Is this a general best practice?
Obviously this would not work as well for dynamic forms (where field count/content is not known prior to display/generation)
I'd personally advise against a VerticalLayoutContainer for forms, for the main reason that this class is designed to both size and position its children based on its own size, and as such may have problems with too much or not enough space, and may make things look a little odd. That said, it can be handy to mix and match form elements with a Grid or some other container that will consume all remaining space.
Generally, for a form, you want it to use the standard html/css layouts available to you, but often with some of the niceties that GWT and GXT can add. I usually suggest FlowPanel (GWT) or FlowLayoutContainer (GXT) to make a simple container with a single column of FieldLabels wrapping fields. If you want to size each to the full width available, the CssFloatLayoutContainer can be a good choice, assigning the width, but not the height of each child, allowing it to take the height it needs. Additionally, CssFloatLayoutContainer could be given several FlowLayoutContainers as children to build several columns of fields, each with some percentage of the width. And certainly, the HtmlLayoutContainer can be perfect for cases where you want a format with your own specific html and css already.
Dynamic forms may even work in these cases as well, as you can add as many children as needed to the FlowLayoutContainer, especially if you've configured it to add a scrollbar if needed.
Ext JS Premium Member