Hybrid View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Oct 2008
    Posts
    16
    Vote Rating
    0
    Fedy2 is on a distinguished road

      0  

    Default Delayed form fields resize in card layout container

    Delayed form fields resize in card layout container


    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
    Code:
    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
    Live test


    Debugging already done
    Possible fix
    Not provided

  2. #2
    Sencha Premium Member feelinforyou's Avatar
    Join Date
    Dec 2012
    Posts
    94
    Vote Rating
    4
    feelinforyou is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    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.

  4. #4
    Sencha Premium Member feelinforyou's Avatar
    Join Date
    Dec 2012
    Posts
    94
    Vote Rating
    4
    feelinforyou is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Oct 2008
    Posts
    16
    Vote Rating
    0
    Fedy2 is on a distinguished road

      0  

    Default


    Any news on this bug?

  6. #6
    Sencha User
    Join Date
    Oct 2008
    Posts
    16
    Vote Rating
    0
    Fedy2 is on a distinguished road

      0  

    Default


    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?