Horizontal Scrolling Problem

[GWTUser]

I'm sure I'm doing something silly.

Can anyone tell me how to fix this to smoothly scroll this group of calendars?

I want it to scroll the calendars from right to left smoothly when the button is pressed.
Right now, it doesn't do anything. Nada. Zip. Rien. Niet.




import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.DatePicker;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.TableLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;


public class HScrollTest extends LayoutContainer implements EntryPoint {

public void onModuleLoad() {
Viewport v = new Viewport();
v.setLayout(new FitLayout());
v.add(this);
RootPanel.get().add(v);
}

public HScrollTest() {
setData("layout", new FitLayout());
}

@Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);

int months=6;
final ContentPanel panel = new ContentPanel(new TableLayout(6));
final DatePicker[] pickers = new DatePicker[months];
for(int i=0; i<months; i++) {
DatePicker datePicker = new DatePicker();
pickers[i] = datePicker;
panel.add(datePicker);
}

Button button = new Button("Scroll right");
button.addSelectionListener(new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
panel.scrollIntoView(pickers[3]);
}
});

add(panel);
add(button);
panel.setWidth(350);
}
}

[GWTUser]

C'mon folks, over 35 views and no one has neeeded to scroll horizontally?

I can't find an example of this in the demo code.

Any help would be most appreciated.