[ ExtGWT / GWT ] Horizontal align problem

Question

hi,

i want to place a some buttons in the center of a panel, but doesn't work. Here my code:

import com.extjs.gxt.ui.client.widget.HorizontalPanel;
import com.extjs.gxt.ui.client.widget.Label;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HasAlignment;
import com.google.gwt.user.client.ui.RootPanel;

private void addStartupBox() {
    VerticalPanel boxPanel = setBoxSize();      
    com.google.gwt.user.client.ui.Label title = createBoxTitle("Prüfungen");        

    // Create second panel for the content of a box     
    com.google.gwt.user.client.ui.VerticalPanel boxContent = new com.google.gwt.user.client.ui.VerticalPanel();
    boxContent.setSpacing(10);
    boxContent.setHorizontalAlignment(com.google.gwt.user.client.ui.VerticalPanel.ALIGN_CENTER);

    // Create content for the box
    Button but1 = new Button("A");
    but1.setPixelSize(280, 25);     

    Button but2 = new Button("B");
    but2.setPixelSize(280, 25);

    Button but3 = new Button("C");
    but3.setPixelSize(280, 25);

    // Add buttons to boxContent
    boxContent.add(but1);
    boxContent.add(but2);
    boxContent.add(but3);

    // Add title and boxContent to boxPanel     
    boxPanel.add(title);
    boxPanel.add(boxContent);

    RootPanel.get("boxPanelContainer").add(boxPanel);
}

the result is:

and the buttons are left aligned. after that I've tryied it this way:

boxContent.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);

but the buttons are still left aligned. my last idea was to use the ExtGWT Vertical Panel with this:

boxContent.setHorizontalAlign(HorizontalAlignment.CENTER);

but unfortunately also doesn't work. can someone tell me, what i'm doing wrong?

Answer 1

Add the following code and try

boxContent.setCellHorizontalAlignment(but1, HasHorizontalAlignment.ALIGN_CENTER);
boxContent.setCellHorizontalAlignment(but2, HasHorizontalAlignment.ALIGN_CENTER);
boxContent.setCellHorizontalAlignment(but3, HasHorizontalAlignment.ALIGN_CENTER);

Above code should be added after the buttons added to the box content( before "RootPanel.get("boxPanelContainer").add(boxPanel);" this line ).

Answer 2

the problem is solved....i added another panel, which is left aligned. Here the code:

private void addStartupBox() {
    VerticalPanel boxPanel = setBoxSize();      
    com.google.gwt.user.client.ui.Label title = createBoxTitle("Prüfungen");        
    boxPanel.setHorizontalAlign(HorizontalAlignment.CENTER);

    // Create second panel for the content of a box     
    com.google.gwt.user.client.ui.VerticalPanel boxContent = new com.google.gwt.user.client.ui.VerticalPanel();
    boxContent.setSpacing(10);

    // Create third panel, which contains the label
    VerticalPanel labelPanel = new VerticalPanel();
    labelPanel.setHorizontalAlign(HorizontalAlignment.LEFT);        

    // Create content for the box
    Button but1 = new Button("A");
    but1.setPixelSize(280, 25);     

    Button but2 = new Button("B");
    but2.setPixelSize(280, 25);

    Button but3 = new Button("C");
    but3.setPixelSize(280, 25);

    // Add buttons to boxContent
    boxContent.add(but1);
    boxContent.add(but2);
    boxContent.add(but3);

    // Add title to third panel 
    labelPanel.add(title);      

    // Add title and boxContent to boxPanel
    boxPanel.add(labelPanel);
    boxPanel.add(boxContent);

    RootPanel.get("boxPanelContainer").add(boxPanel);
}