Creating Form in Center Screen in GWT/GXT?

Question

I am using GXT 2.3.1 , I want to create a form on the center screen.

So i Used form example from the demo Form Example and CenterLayout as given in the demo EXT GWT Explorer

but it doesnt appear to be similar as given in Demo. neither its the from is in Center.

can any body explain this.??

my code

public class EmpDetails extends LayoutContainer {


private VerticalPanel EmpVP;
private FormData formData;

public EmpDetails() {

    formData = new FormData("-20");

    EmpVP = new VerticalPanel();  
    EmpVP.setSpacing(10); 
    createForm();
    setLayout(new CenterLayout());
    add(EmpVP);
}


private void createForm() {// some textboxes and radio button from demo example}

output screen

Answer 1

Try with HorizontalAlignment. The table that is auto-generated by GWT is not having width 100% in this case. Just set it using css.

public EmpDetails() {

    formData = new FormData("-20");

    empVP = new VerticalPanel(); 
    empVP.setStyleName("topPanel"); 
    empVP.setSpacing(10); 
    createForm();
    empVP.setHorizontalAlign(HorizontalAlignment.CENTER);

    add(empVP);
}

css:

.topPanel > table{
    width:100%;
}

set the style attribute for FormPanel if you want all the title to be left aligned.

you can move it to a separate style in css.

    FormPanel simple = new FormPanel();
    ...
    simple.setStyleAttribute("text-align", "left");

Note: Follow Java naming conventions.