View Full Version : Complex form layouts without Layout containers

4 Jun 2012, 9:20 AM
Hey folks,
I heard Darrell Meyer talk about how its not good practice to use containers for the layout of complex forms as it is very slow, instead use HTML fragments!

I often work with complex forms that have column layouts and field sets to organize the fields and im unable to create this without using tons of containers.

Attached is a screen shot of one such form, each column is a seperate container and those container are then organised in a field set with a column layout.
Anyone know what darrell means with HTML fragments or how would you achieve this layout?



4 Jun 2012, 12:42 PM
One approach could be to use HtmlContainer. There you could have the required markup, for example a table. Each field would be rendered into a specific cell that you can target with a css selector.

HtmlLayoutContainer does not resize its children automatically. Do you require this feature too?

4 Jun 2012, 11:27 PM
Hi Sven,

I rarely use layouts like anchor layout or percentage sizing for form fields so resize may not be a big issue.

Do you have any code snippet or examples where this is acheived?

Im not som familar with CSS/HTML as i should be (lazy java developer) I've been trying like this but no luck yet.

FormPanel form = new FormPanel();

TextField ro = new TextField();
ro.setFieldLabel("ReadOnly field");
ro.setValue("READ ONLY");

TextField dis = new TextField();
dis.setFieldLabel("Disabled field");

StringBuffer sb = new StringBuffer();
sb.append("<div id='ro'></div>");
sb.append("<div id='dis'></div>");

HtmlContainer html = new HtmlContainer(sb.toString());
html.add(ro, "#ro");
html.add(dis, "#dis");



5 Jun 2012, 4:25 AM
I run your code and it works as expected. What exactly does not work for you?

5 Jun 2012, 4:50 AM

I expect the form labels, padding etc to be shown but i cant get this working


5 Jun 2012, 5:42 AM

The FormLabels are comming from the FormLayout. Because you are no longer using a FormLayout, you will need to put them into your markup:

StringBuffer sb = new StringBuffer();
sb.append("<div style="padding: 10px">LABEL 1</div>");sb.append("<div id='ro'></div>");
sb.append("<div style="padding: 10px">LABEL 2</div>");sb.append("<div id='dis'></div>");

6 Jun 2012, 7:22 AM

Sorry for the late reply and thanks for you help ill give that a go



26 Jun 2012, 12:20 PM
I'm interested in this too, because we create complex form that use sometime up to 10 ContentPanel some embedded in others. This is a convenient way to code and easy to maintain.

I'm not sure using String buffer could be a solution for us. the code will become too hard to maintain
So what do you guys suggest, code maintenance vs speed ?
Why can't gxt convert our Container into optimal html code instead ?