01: /*
02: * GWT-Ext Widget Library
03: * Copyright(c) 2007-2008, GWT-Ext.
04: * licensing@gwt-ext.com
05: *
06: * http://www.gwt-ext.com/license
07: */
08: package com.gwtext.sample.showcase2.client.form;
09:
10: import com.gwtext.client.core.Position;
11: import com.gwtext.client.widgets.Button;
12: import com.gwtext.client.widgets.Panel;
13: import com.gwtext.client.widgets.form.FormPanel;
14: import com.gwtext.client.widgets.form.HtmlEditor;
15: import com.gwtext.client.widgets.form.TextField;
16: import com.gwtext.client.widgets.form.VType;
17: import com.gwtext.client.widgets.layout.AnchorLayoutData;
18: import com.gwtext.client.widgets.layout.ColumnLayout;
19: import com.gwtext.client.widgets.layout.ColumnLayoutData;
20: import com.gwtext.client.widgets.layout.FormLayout;
21: import com.gwtext.sample.showcase2.client.ShowcasePanel;
22:
23: public class MultiColumnFormPanel extends ShowcasePanel {
24:
25: public String getSourceUrl() {
26: return "source/form/MultiColumnFormPanel.java.html";
27: }
28:
29: public Panel getViewPanel() {
30: if (panel == null) {
31: panel = new Panel();
32:
33: //create the FormPanel and set the label position to top
34: FormPanel formPanel = new FormPanel();
35: formPanel.setFrame(true);
36: formPanel
37: .setTitle("Multi Column, Nested Layouts and Anchoring");
38: formPanel.setPaddings(5, 5, 5, 0);
39: formPanel.setWidth(600);
40: formPanel.setLabelAlign(Position.TOP);
41:
42: //create a top panel with 2 columns (ColumnLayout). Create a Panel for the first column with
43: //layout FormLayout and add the fields for the first column. Then create a second Panel with FormLayout
44: //and add fields to the sencond panel. Finally add the first and secod pane to the top panel which lays
45: //them out in columns since it has a ColumnLayout assigned to it.
46:
47: //create top panel with ColumnLayout
48: Panel topPanel = new Panel();
49: topPanel.setLayout(new ColumnLayout());
50:
51: //create first panel and add fields to it
52: Panel columnOnePanel = new Panel();
53: columnOnePanel.setLayout(new FormLayout());
54:
55: TextField firstName = new TextField("First Name", "first");
56: columnOnePanel.add(firstName, new AnchorLayoutData("95%"));
57:
58: TextField company = new TextField("Company", "company");
59: columnOnePanel.add(company, new AnchorLayoutData("95%"));
60:
61: //add first panel as first column with 50% of the width
62: topPanel.add(columnOnePanel, new ColumnLayoutData(.5));
63:
64: //create second panel and add fields to it
65: Panel columnTwoPanel = new Panel();
66: columnTwoPanel.setLayout(new FormLayout());
67:
68: TextField lastName = new TextField("Last Name", "last");
69: columnTwoPanel.add(lastName, new AnchorLayoutData("95%"));
70:
71: TextField email = new TextField("Email", "email");
72: email.setVtype(VType.EMAIL);
73: columnTwoPanel.add(email, new AnchorLayoutData("95%"));
74:
75: //add the second panel as the second column to the top panel to take up the other 50% width
76: topPanel.add(columnTwoPanel, new ColumnLayoutData(0.5));
77: formPanel.add(topPanel);
78:
79: //add a HtmlEditor below the 2-column top panel
80: HtmlEditor htmlEditor = new HtmlEditor("Biography", "bio");
81: htmlEditor.setHeight(200);
82: formPanel.add(htmlEditor, new AnchorLayoutData("98%"));
83:
84: //add a couple of buttons to the form
85: formPanel.addButton(new Button("Save"));
86: formPanel.addButton(new Button("Cancel"));
87:
88: panel.add(formPanel);
89: }
90: return panel;
91: }
92:
93: public String getIntro() {
94: return "<p>This example illustrates a multi-column form with lables on top. The form has a top panel which has two columns. "
95: + "The first column is a Panel with the 'First Name' and 'Company' fields added to it. And the second column "
96: + "is a Panel with the 'Last Name' and 'Email' fields added to it.<p>"
97: + "The top panel is added to the form and then a HtmlEditor with no label is added below it.</p>";
98: }
99: }
|