PDA

View Full Version : Creating Columns in a Tab Panel


ender07
01-23-2009, 06:26 PM
Hello:

I am new to GXT and am trying to create columns in a tab panel, without any luck. Any thoughts on what I am doing wrong in the code below? Also, is this the right approach to this or should I be using a grid?

thanks

FormPanel panel = new FormPanel();
panel.setFrame(false);
panel.setHeaderVisible(false);
panel.setBodyBorder(false);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setLayout(new FlowLayout());

LayoutContainer main = new LayoutContainer();
main.setWidth(450);
main.setLayout(new ColumnLayout());

LayoutContainer left = new LayoutContainer();

FormLayout layout = new FormLayout();
layout.setLabelAlign(LabelAlign.TOP);
left.setLayout(layout);

TextField<String> first = new TextField<String>();
first.setFieldLabel("First Name");
left.add(first);

TextField<String> company = new TextField<String>();
company.setFieldLabel("Company");
left.add(company);

LayoutContainer right = new LayoutContainer();

layout = new FormLayout();
layout.setLabelAlign(LabelAlign.TOP);
right.setLayout(layout);

TextField<String> last = new TextField<String>();
last.setFieldLabel("Last");
right.add(last);

TextField<String> email = new TextField<String>();
email.setFieldLabel("Email");
right.add(email);


TabPanel tabs = new TabPanel();

/* Create the tabs */
TabItem profileItem = new TabItem();
profileItem.setText("Profile");
//profileItem.setLayout(new FormLayout());

profileItem.add(left);
profileItem.add(right);


TabItem applicationItem = new TabItem();
applicationItem.setText("Application");
applicationItem.setLayout(new FormLayout());

tabs.add(profileItem);
tabs.add(applicationItem);



panel.add(tabs);
panel.setSize(600, 400);

vp.add(panel);




// Add image and button to the RootPanel
RootPanel.get().add(vp);

gslender
01-24-2009, 06:25 AM
The only container with ColumnLayout is main, but its never added (or nothing is added) to it?

I'd suggest you break this down into chunks whereby you get each container working correctly first - ie get your forms (left and right) working, then put them into columns, then add to tabitems etc..

also, have a look at this example (and the others) for tips -> http://extjs.com/explorer/#advancedforms