Delayed form fields resize in card layout container

[Fedy2]

Required Information

Version(s) of Ext GWT
GXT 3.0.1

Browser versions and OS
(and desktop environment, if applicable)

• Firefox 18.0.2, Ubuntu 10.04, GNOME

Virtual Machine
No

Description
The fields in a panel contained in a card layout container are resized only after a mouse movement.
This happens for the text field, the file upload field, the slider field, the spinner field, the date field and the text area field.

Run mode
development mode

Steps to reproduce the problem

1. Start running in development mode in Eclipse
2. Open app in browser
3. Click the second button and don't move the mouse pointer
4. Move the mouse pointer

Expected result
The fields sized correctly.

Actual result
The fields resized only after the mouse movement.

Test case

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.util.DateWrapper;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.ContentPanel.ContentPanelAppearance;
import com.sencha.gxt.widget.core.client.FramedPanel;
import com.sencha.gxt.widget.core.client.FramedPanel.FramedPanelAppearance;
import com.sencha.gxt.widget.core.client.Slider;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.container.CardLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
import com.sencha.gxt.widget.core.client.form.DateField;
import com.sencha.gxt.widget.core.client.form.FieldLabel;
import com.sencha.gxt.widget.core.client.form.FileUploadField;
import com.sencha.gxt.widget.core.client.form.NumberPropertyEditor.DoublePropertyEditor;
import com.sencha.gxt.widget.core.client.form.SpinnerField;
import com.sencha.gxt.widget.core.client.form.TextArea;
import com.sencha.gxt.widget.core.client.form.TextField;
import com.sencha.gxt.widget.core.client.form.TimeField;
import com.sencha.gxt.widget.core.client.form.validator.MinDateValidator;
import com.sencha.gxt.widget.core.client.form.validator.MinLengthValidator;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class GXTTest implements EntryPoint {

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		RootPanel.get().add(asWidget());
	}

	public Widget asWidget() {

		ContentPanel panel = new ContentPanel(GWT.<ContentPanelAppearance> create(FramedPanelAppearance.class));
		panel.getElement().getStyle().setMargin(10d, Unit.PX);
		panel.setPixelSize(600, 700);
		panel.setHeadingText("CardLayout Example");

		final CardLayoutContainer layout = new CardLayoutContainer();

		final Label l1 = new Label("This is the contents for card: 1");
		layout.add(l1);
		TextButton b1 = new TextButton("Card 1");
		b1.addSelectHandler(new SelectHandler() {

			@Override
			public void onSelect(SelectEvent event) {
				layout.setActiveWidget(l1);
			}
		});
		panel.addButton(b1);
		
		final Widget l2 = createForm();
		layout.add(l2);
		TextButton b2 = new TextButton("Card 2");
		b2.addSelectHandler(new SelectHandler() {

			@Override
			public void onSelect(SelectEvent event) {
				layout.setActiveWidget(l2);
			}
		});
		panel.addButton(b2);

		panel.add(layout);
		return panel;
	}

	private FramedPanel createForm() {
	    FramedPanel panel = new FramedPanel();
	    panel.setHeadingText("Simple Form");
	    panel.setWidth(350);
	    panel.setBodyStyle("background: none; padding: 5px");
	 
	    VerticalLayoutContainer p = new VerticalLayoutContainer();
	    panel.add(p);
	 
	    TextField firstName = new TextField();
	    firstName.setAllowBlank(false);
	    firstName.setEmptyText("Enter your name...");
	    p.add(new FieldLabel(firstName, "Name"), new VerticalLayoutData(1, -1));
	 
	    DateField date = new DateField();
	    date.addValidator(new MinDateValidator(new Date()));
	    p.add(new FieldLabel(date, "Birthday"), new VerticalLayoutData(1, -1));
	 
	    TimeField time = new TimeField();
	    time.setMinValue(new DateWrapper().clearTime().addHours(8).asDate());
	    time.setMaxValue(new DateWrapper().clearTime().addHours(18).addSeconds(1).asDate());
	    p.add(new FieldLabel(time, "Time"), new VerticalLayoutData(1, -1));
	 
	    Slider slider = new Slider();
	    slider.setMinValue(40);
	    slider.setMaxValue(90);
	    slider.setValue(0);
	    slider.setIncrement(5);
	    slider.setMessage("{0} inches tall");
	    p.add(new FieldLabel(slider, "Size"), new VerticalLayoutData(1, -1));
	 
	    TextArea description = new TextArea();
	    description.setAllowBlank(false);
	    description.addValidator(new MinLengthValidator(10));
	    p.add(new FieldLabel(description, "Description"), new VerticalLayoutData(1, 100));
	 
	    final SpinnerField<Double> spinnerField = new SpinnerField<Double>(new DoublePropertyEditor());
	    spinnerField.setIncrement(.1d);
	    spinnerField.setMinValue(-10d);
	    spinnerField.setMaxValue(10d);
	    spinnerField.setAllowNegative(true);
	    spinnerField.setAllowBlank(false);
	    spinnerField.getPropertyEditor().setFormat(NumberFormat.getFormat("0.0"));
	    FieldLabel spinLabel = new FieldLabel(spinnerField, "Duration(s)");
	    p.add(spinLabel, new VerticalLayoutData(1, -1));
	    
	    FileUploadField fileUploadField = new FileUploadField();
	    FieldLabel fileLabel = new FieldLabel(fileUploadField, "File");
	    p.add(fileLabel, new VerticalLayoutData(1, -1));
	 
	    return panel;
	  }
}

Helpful Information

Screenshot or video

• * Before mouse movement: http://pbrd.co/XLhtcJ
  * After mouse movement: http://pbrd.co/XLhHkh

Live test


Debugging already done
Possible fix
Not provided

[feelinforyou]

I get the same issue. I noticed this behaviour in a card layout container and a tab panel.
I have a toolbar with an storefilterfield. This two objects are always rendered delayed (maybe 1-2 seconds) for the first time. Then everything looks nice.

[Colin Alworth]

Does this issue occur in web mode as well? If not, this may be due to Dev mode simply being much slower than compiled JavaScript.

[feelinforyou]

No, this error also occurs in web mode. Switching tabs with a toolbar and a storefilterfield sometimes needs more than 2 seconds to render (for the first time). All other things are well renderer.

[Fedy2]

Any news on this bug?

[Fedy2]

Hi Colin,
the resized panel is not render until the mouse is moved, so don't seems a matter of slowness.

Have you tried the sample?