/* * GWT-Ext Widget Library * Copyright(c) 2007-2008, GWT-Ext. * licensing@gwt-ext.com * * http://www.gwt-ext.com/license */ import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; import com.gwtext.client.core.Position; import com.gwtext.client.widgets.Button; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.form.FormPanel; import com.gwtext.client.widgets.form.HtmlEditor; import com.gwtext.client.widgets.form.TextField; import com.gwtext.client.widgets.form.VType; import com.gwtext.client.widgets.layout.AnchorLayoutData; import com.gwtext.client.widgets.layout.ColumnLayout; import com.gwtext.client.widgets.layout.ColumnLayoutData; import com.gwtext.client.widgets.layout.FormLayout; public class MultiColumnFormPanel implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); //create the FormPanel and set the label position to top FormPanel formPanel = new FormPanel(); formPanel.setFrame(true); formPanel.setTitle("Multi Column, Nested Layouts and Anchoring"); formPanel.setPaddings(5, 5, 5, 0); formPanel.setWidth(600); formPanel.setLabelAlign(Position.TOP); //create a top panel with 2 columns (ColumnLayout). Create a Panel for the first column //with layout FormLayout and add the fields for the first column. Then create a second //Panel with FormLayout and add fields to the sencond panel. Finally add the first and //second panel to the top panel which lays them out in columns since it has a ColumnLayout //assigned to it. //create top panel with ColumnLayout Panel topPanel = new Panel(); topPanel.setLayout(new ColumnLayout()); //create first panel and add fields to it Panel columnOnePanel = new Panel(); columnOnePanel.setLayout(new FormLayout()); TextField firstName = new TextField("First Name", "first"); columnOnePanel.add(firstName, new AnchorLayoutData("95%")); TextField company = new TextField("Company", "company"); columnOnePanel.add(company, new AnchorLayoutData("95%")); //add first panel as first column with 50% of the width topPanel.add(columnOnePanel, new ColumnLayoutData(.5)); //create second panel and add fields to it Panel columnTwoPanel = new Panel(); columnTwoPanel.setLayout(new FormLayout()); TextField lastName = new TextField("Last Name", "last"); columnTwoPanel.add(lastName, new AnchorLayoutData("95%")); TextField email = new TextField("Email", "email"); email.setVtype(VType.EMAIL); columnTwoPanel.add(email, new AnchorLayoutData("95%")); //add the second panel as the second column to the top panel to take up the other 50% width topPanel.add(columnTwoPanel, new ColumnLayoutData(0.5)); formPanel.add(topPanel); //add a HtmlEditor below the 2-column top panel HtmlEditor htmlEditor = new HtmlEditor("Biography", "bio"); htmlEditor.setHeight(200); formPanel.add(htmlEditor, new AnchorLayoutData("98%")); //add a couple of buttons to the form formPanel.addButton(new Button("Save")); formPanel.addButton(new Button("Cancel")); panel.add(formPanel); RootPanel.get().add(panel); } }