PDA

View Full Version : Form Table/Layout


c36145
05-23-2008, 03:26 PM
1) I want to create a set of form items, I want to be able layout the form items is several columns. How do I this? And How do I set the back ground colors and font colors.


http://extjs.com/forum/attachment.php?attachmentid=7003&stc=1&d=1211574328

darrellmeyer
05-23-2008, 10:53 PM
1) I want to create a set of form items, I want to be able layout the form items is several columns. How do I this? Multi-column forms are not currently supported, although it is possible. Advanced form layouts are in our roadmap a marked for 1.2 (you can expect this sooner and much of the code is already complete). At this point, there are several different ways to get what you are looking for.

The first thing to remember is that FormLayout is just like any other Layout. This means you can assign it to a LayoutContainer just as FormPanel uses a FormLayout behind the scenes.

Option 1
You can use multiple containers and layouts. You could have a LayoutContainer with a ColumnLayout (new layout in SVN). You can add 2+ child LayoutContainers, each using a FormLayout. Then add you fields to the appropriate children.

Option 2
You can add your fields to any GWT Panels such as FlexTable and Grid. The negative with this approach is that you will lose support for labels via the fields. But they can be added manually to whatever panel you use.


Option 3
Similiar to Option 2, you can use a HtmlContainer with raw HTML markup. You can design your from in HTML and mark the elements where you want the field to be inserted with a specific id or class. The HtmlContainer is created with the raw HTML (can be retrieved us using AJAX, a template, or from a string), then fields are added to the container by specifying the insert location when adding the component.

String html = "<table><tr><td>First:</td><td>Last:</td></tr><tr><td id="first"></td><td class=last></td></tr></table>";
HtmlContainer c = new HtmlContainer(html);
c.add(firstField, "#id");
c.add(lastField, ".last");
And How do I set the back ground colors and font colors.Depends on what option you are using. If using FormLayout, you you are probably limited to the label style only. Option 2 and Option 3, you have complete control of the styles the label and fields are placed in.

c36145
05-28-2008, 10:39 AM
Can you give me an example of option 1

darrellmeyer
05-29-2008, 06:35 PM
Take a look at the project com.extjs.gxt.test in the trunk. Look at FormPanelTest3 for an example of option 1.

darrellmeyer
06-03-2008, 06:59 AM
Option 1 is the best approach and new demo pages have been added to the Explorer Demo (beta 4). Option 2 and Option 3 should generally be avoided now.