TextButton in ButtonBar in TabPanel - bad button positioning in 2nd and later tabs

[jvahabzadeh]

I have a TabPanel. I have added multiple tabs - of the SAME class, just different instances.

This class has a ButtonBar. There are two TextButtons, one labeled Edit, and the other labeled Save, though Save is initially, by design, not visible.

When I click on Edit, the text of that button changes to Cancel, and the Save button is set to visible.

This works correctly on the first tab, with the Save buttons showing up horizontally after the Edit (now Cancel) button. However, if it's the second or higher numbered tab, the save button overlaps the Edit/Cancel button, showing up in the extreme upper-left corner of the button bar.

Here is code to demonstrate the issue:

public class Bug_SenchaWithButtonBar implements EntryPoint {

  private static class MyFormGUI implements SelectHandler {
    private static final String SAVE = "Save";
    private static final String EDIT = "Edit";
    private static final String CANCEL = "Cancel";
    protected ButtonBar buttonBar = new ButtonBar();
    protected TextButton saveButton = new TextButton(SAVE);
    protected TextButton editOrCancelButton = new TextButton(EDIT);

    public MyFormGUI() {
      super();
      initButtonBar();
    }

    protected void initButtonBar() {
      buttonBar.add(editOrCancelButton);
      buttonBar.add(saveButton);
      editOrCancelButton.addSelectHandler(this);
      saveButton.addSelectHandler(this);
      saveButton.setVisible(false);
    }

    public Widget getWidget() {
      VerticalLayoutContainer container = new VerticalLayoutContainer();
      container.add(buttonBar);
      return container;
    }

    public void onSelect(SelectEvent event) {
      Object source = event.getSource();
      if(source == editOrCancelButton) {
        if(EDIT.equals(editOrCancelButton.getText())) {
          setEditMode(true);
        }
        else { // it's CANCEL
          setEditMode(false);
        }
      }
      else if(source == saveButton) {
        setEditMode(false);
        System.out.println("Saving info...");
      }
    }

    protected void setEditMode(boolean enableEditMode) {
      editOrCancelButton.setText(enableEditMode ? CANCEL : EDIT);
      saveButton.setVisible(enableEditMode);
      buttonBar.forceLayout();
    }
  }

  public void onModuleLoad() {
    VerticalLayoutContainer verticalContainer = new VerticalLayoutContainer();
    TabPanel tabPanel = new TabPanel();
    tabPanel.add(new MyFormGUI().getWidget(), "Tab 1");
    tabPanel.add(new MyFormGUI().getWidget(), "Tab 2");
    tabPanel.add(new MyFormGUI().getWidget(), "Tab 3");
    tabPanel.add(new MyFormGUI().getWidget(), "Tab 4");
    verticalContainer.add(tabPanel, new VerticalLayoutData(-1, -1));
    RootPanel.get().add(verticalContainer);
  }
} 

Is there a way around this, or (for now) a workaround? All tabs should have the button behavior the same as the first tab.

(My real-world case has multiple classes that extend MyFormGUI, and the same aberrant behavior occurs, but I stripped it down to the bare essentials to demonstrate the bug)

[jvahabzadeh]

Has anyone been able to confirm whether this is a bug?

[Colin Alworth]

I can reproduce this on 3.0.3, but this appears to be working with the latest nightly build, probably as the result of fixes made for EXTGWT-2313, filed originally as http://www.sencha.com/forum/showthread.php?230863, though it grew a bit to deal with several other quirks of how HBoxLayoutContainer and TabPanel interact.

The nightly builds can be downloaded from our maven repo with your support credentials, or you can download directly from the support portal - click on the nightly builds button after you log in.