TextButton with Icon Aligned at Top / Bottom Overlaps with other buttons

I am trying to add few TextButtons with Icon aligned at TOP. But the buttons are overlapping even after setting the Margins/Padding.

But the spacing comes correctly if I use LEFT aligned images.

Here is the sample test case.

Code:

---


import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.cell.core.client.ButtonCell.IconAlign;
import com.sencha.gxt.core.client.util.Margins;
import com.sencha.gxt.core.client.util.Padding;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.container.BoxLayoutContainer.BoxLayoutData;
import com.sencha.gxt.widget.core.client.container.VBoxLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VBoxLayoutContainer.VBoxLayoutAlign;

public class TestApplication extends Application {

    public void onModuleLoad() {

        VBoxLayoutContainer vBoxLayoutContainer = new VBoxLayoutContainer();
        vBoxLayoutContainer.setPadding(new Padding(10));
        vBoxLayoutContainer.setVBoxLayoutAlign(VBoxLayoutAlign.STRETCH);
        vBoxLayoutContainer.setBorders(true);
        vBoxLayoutContainer.setHeight(500);
        vBoxLayoutContainer.setWidth(500);

        for (int j = 0; j < 2; j++) {
            TextButton component = new TextButton();
            component.setText(j + " Button");
            component.setIcon(Images.INSTANCE.contact());
            component.setIconAlign(IconAlign.TOP);
            component.setHeight(80);

            vBoxLayoutContainer.add(component, new BoxLayoutData(
                    new Margins(10)));
        }

        RootPanel.get().add(vBoxLayoutContainer);
    }
}

---

Regards
Thursday