Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    59
    Vote Rating
    1
    chris.brown.spe is on a distinguished road

      0  

    Default Validation Error causing visual problems

    Validation Error causing visual problems


    I have a row editor with some fields that have empty validators added to them. These validators are working as expected, but the error message always displays at the end of the row editor. This being at the end of my page width it causes the scroll bar to appear and flicker for some reason. If i resize the page, the error message moves to where the save/cancel buttons are. This is much more appealing. How can I get it to appear there in the first place?

    Edit: If i resize the page width wide enough, it goes back to the right of the current row.

  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Thanks for the report. Do you have any ready to use Testcase that implements EntryPoint? I will move this thread to the bugs forum and push it into the tracking system

  3. #3
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    59
    Vote Rating
    1
    chris.brown.spe is on a distinguished road

      0  

    Default


    Of course I don't have a test case for you. What kind of an awful user would I be if I did?...I'll try to work on that for you...

    Currently tracking the issue through debug. Looks like the show() function for ToolTip the first time doesn't catch that the screen isn't wide enough. When it calls onWindowResize() the first time it catches it and moves the ToolTip to the correct position. For my use, I would prefer if the ToolTip was forced to be bottom aligned instead of switching between the two. Will update as I find more.

  4. #4
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    59
    Vote Rating
    1
    chris.brown.spe is on a distinguished road

      0  

    Default


    Code:
    package com.agristats.pmix.web.view;
    
    
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
    
    
    import com.google.gwt.cell.client.DateCell;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.editor.client.Editor.Path;
    import com.google.gwt.i18n.client.DateTimeFormat;
    import com.google.gwt.i18n.client.NumberFormat;
    import com.google.gwt.safehtml.shared.SafeHtml;
    import com.google.gwt.safehtml.shared.SafeHtmlUtils;
    import com.google.gwt.text.shared.AbstractSafeHtmlRenderer;
    import com.google.gwt.user.client.ui.HasHorizontalAlignment;
    import com.google.gwt.user.client.ui.IsWidget;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.Widget;
    import com.sencha.gxt.cell.core.client.SimpleSafeHtmlCell;
    import com.sencha.gxt.core.client.ValueProvider;
    import com.sencha.gxt.data.shared.ListStore;
    import com.sencha.gxt.data.shared.ModelKeyProvider;
    import com.sencha.gxt.data.shared.PropertyAccess;
    import com.sencha.gxt.widget.core.client.FramedPanel;
    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.form.Field;
    import com.sencha.gxt.widget.core.client.form.TextField;
    import com.sencha.gxt.widget.core.client.form.validator.EmptyValidator;
    import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
    import com.sencha.gxt.widget.core.client.grid.ColumnModel;
    import com.sencha.gxt.widget.core.client.grid.Grid;
    import com.sencha.gxt.widget.core.client.grid.editing.GridEditing;
    import com.sencha.gxt.widget.core.client.grid.editing.GridRowEditing;
    
    
    public class GridTest implements IsWidget, EntryPoint {
    
    
    	interface PlaceProperties extends PropertyAccess<Plant> {
    		ValueProvider<Plant, Date> available();
    
    
    		@Path("id")
    		ModelKeyProvider<Plant> key();
    
    
    		ValueProvider<Plant, String> light();
    
    
    		ValueProvider<Plant, String> name();
    
    
    		ValueProvider<Plant, Boolean> indoor();
    
    
    		ValueProvider<Plant, Double> price();
    	}
    
    
    	private static final PlaceProperties properties = GWT.create(PlaceProperties.class);
    
    
    	protected Grid<Plant> grid;
    
    
    	@Override
    	public Widget asWidget() {
    		ColumnConfig<Plant, String> cc1 = new ColumnConfig<Plant, String>(properties.name(), 220, "Name");
    
    
    		ColumnConfig<Plant, String> cc2 = new ColumnConfig<Plant, String>(properties.light(), 130, "Light");
    
    
    		DateCell dateCell = new DateCell(DateTimeFormat.getFormat("yyyy MMM dd"));
    
    
    		ColumnConfig<Plant, Date> cc3 = new ColumnConfig<Plant, Date>(properties.available(), 95, "Date");
    
    
    		cc3.setCell(dateCell);
    
    
    		ColumnConfig<Plant, Boolean> cc4 = new ColumnConfig<Plant, Boolean>(properties.indoor(), 55, "Indoor");
    		cc4.setCell(new SimpleSafeHtmlCell<Boolean>(new AbstractSafeHtmlRenderer<Boolean>() {
    			@Override
    			public SafeHtml render(Boolean object) {
    				return SafeHtmlUtils.fromString(object ? "True" : "False");
    			}
    		}));
    
    
    		ColumnConfig<Plant, Double> cc5 = new ColumnConfig<Plant, Double>(properties.price(), 100, "Price");
    		cc5.setAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
    		cc5.setCell(new SimpleSafeHtmlCell<Double>(new AbstractSafeHtmlRenderer<Double>() {
    			@Override
    			public SafeHtml render(Double object) {
    				return SafeHtmlUtils.fromString(NumberFormat.getCurrencyFormat().format(object));
    			}
    		}));
    
    
    		List<ColumnConfig<Plant, ?>> l = new ArrayList<ColumnConfig<Plant, ?>>();
    		l.add(cc1);
    		l.add(cc2);
    		l.add(cc5);
    		l.add(cc3);
    		l.add(cc4);
    
    
    		ColumnModel<Plant> cm = new ColumnModel<Plant>(l);
    
    
    		final ListStore<Plant> store = new ListStore<Plant>(properties.key());
    		store.add(new Plant());
    
    
    		grid = new Grid<Plant>(store, cm);
    		grid.getView().setAutoExpandColumn(cc1);
    
    
    		// EDITING//
    		final GridEditing<Plant> editing = createGridEditing(grid);
    		Field<String> field = new TextField();
    		field.addValidator(new EmptyValidator<String>());
    		editing.addEditor(cc1, field);
    
    
    		// column 5 is not editable
    
    
    		// EDITING//
    
    
    		FramedPanel cp = new FramedPanel();
    		cp.setHeadingText("Editable Grid Example");
    		cp.setPixelSize(600, 400);
    		cp.addStyleName("margin-10");
    
    
    		VerticalLayoutContainer con = new VerticalLayoutContainer();
    		con.setBorders(true);
    		con.add(grid, new VerticalLayoutData(1, 1));
    
    
    		cp.setWidget(con);
    
    
    		return cp;
    	}
    
    
    	protected GridEditing<Plant> createGridEditing(Grid<Plant> editableGrid) {
    		return new GridRowEditing<Plant>(editableGrid);
    	}
    
    
    	@Override
    	public void onModuleLoad() {
    		RootPanel.get().add(asWidget());
    	}
    }
    This example will require the Plant class from the Sencha example "Row Editable Grid"

    How to reproduce (IE9)
    1) Make window slightly wider then size of table
    2) Click on row to enable row editor - error text displays to the right but causes scroll bars to flicker
    3) Resize window only slightly - triggers error text to move under the row
    4) Widen window to fit error - moves back to right side but anchor is still pointing up

    It will also still point up if you force it to display above the row as well. Let me know if you have any questions in reproducing this.

  5. #5
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    59
    Vote Rating
    1
    chris.brown.spe is on a distinguished road

      0  

    Default


    For those looking for a quick fix...

    Code:
    new GridRowEditing<Plant>(editableGrid) {			@Override
    			protected void showTooltip(SafeHtml msg) {
    				if (tooltip == null) {
    					ToolTipConfig config = new ToolTipConfig();
    					config.setAutoHide(false);
    					config.setMouseOffset(new int[] { 0, 0 });
    					config.setAnchor(Side.TOP);
    					config.setTitleHtml(getMessages().errorTipTitleText());
    					tooltip = new ToolTip(toolTipAlignWidget, config);
    					tooltip.setMaxWidth(600);
    				}
    				ToolTipConfig config = tooltip.getToolTipConfig();
    				config.setBodyHtml(msg);
    				tooltip.update(config);
    				tooltip.enable();
    				if (!tooltip.isAttached()) {
    					tooltip.show();
    					tooltip.getElement().updateZIndex(0);
    				}
    			}
    		};
    Overwriting the showToolTip function and changing Side.LEFT to Side.TOP will force the tooltip to default to the bottom of the row. All other behavior will remain, if the window is resized to eliminate the space under the row it will reposition to the right or top of the row. Error with anchor direction is still present.

  6. #6
    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


    Can you confirm what version you are using? As I recall, tooltip anchors got a lot smarter in 3.0.5 or so, so they hopefully won't make a mistake like this... If you are using an older version, try a newer one, otherwise we do need a test case - it seems to be working correctly in 3.0.6 (see http://qa.sencha.com:8080/examples-3...oweditablegrid, resize the page and type garbage into the combo).

  7. #7
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    59
    Vote Rating
    1
    chris.brown.spe is on a distinguished road

      0  

    Default


    Sure enough, i'm on 3.0.4. I'll give the latest version a shot to see what it changes.

  8. #8
    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


    I'm going to mark this as closed for now, but if you find there is still a problem, let me know and I'll reopen it and look in again.

Thread Participants: 2