DateItem/DateTimeItem.setUseMask(..) bug

[mdeng]

SmartGWT 4.0Pro 02/21/2014 build.

Subsequent calls to DateItem/DateTimeItem.setUseMask(true) causes the field height to increase to height of (textfield + label) when Label orientation is set to TOP. See attached image.

Reason why I am calling setUseMask more than once is to update the mask, after changing locale and setting new date formats in DateUtil.

The following may be the offending code in ISC_Forms.js

            // If we have a specified height, expand the text box to fill the available space

            if (this.height && (!this.textFieldProperties || !this.textFieldProperties.height))
            {
                textField.height = this.getInnerHeight();
            }

[Isomorphic]

We don't see a way that changing the useMask property could cause this, nor do we see a reason you'd call it more than once due to locale settings..

If you think there's a framework issue here, please try putting together runnable code that replicates an issue.

[mdeng]

Hi,

Our application allow each user to can change the language/locale on the fly. After the user changes the locale, I call the appropriate DateUtil methods to update to the correct locale.

I found that the DateItem/DateTimeItem's mask isn't updated automatically to handle the new formatting, it's updated if I call setUseMask(..) again. But as I mention, calling it again causes the height of the field to increase to field + label height.

Here a simple test driver for the height issue.

public class SmartGwtTester implements EntryPoint {
	public void onModuleLoad() {
		
		setEurope();
		
		VLayout layout = new VLayout(15);
		final DynamicForm form = new DynamicForm();
		form.setTitleOrientation(TitleOrientation.TOP);
		form.setGroupTitle("Europe Formatting");
		form.setIsGroup(true);
		form.setWidth(600);
		form.setHeight(600);
		
		final DateTimeItem dateTimeItem = new DateTimeItem("dateTime", "Date Time");
		dateTimeItem.setUseTextField(true);
		dateTimeItem.setEnforceDate(true);
		dateTimeItem.setRequired(true);
		dateTimeItem.setUseMask(true);
		
		final DateItem dateItem = new DateItem("date", "Date");
		dateItem.setEnforceDate(true);
		dateItem.setUseMask(true);
		dateItem.setUseTextField(true);
		dateItem.setRequired(true);
		
		ButtonItem setUSAButton = new ButtonItem("usa", "USA");
		setUSAButton.addClickHandler(new ClickHandler(){
			@Override
			public void onClick(ClickEvent event) {
				form.setGroupTitle("USA Formatting");
				setUSA();
				dateTimeItem.setUseMask(true);
				dateItem.setUseMask(true);
				form.markForRedraw("updated visibility");
			}
		});
		
		ButtonItem setEuropeButton = new ButtonItem("europe", "Europe");
		setEuropeButton.addClickHandler(new ClickHandler(){
			@Override
			public void onClick(ClickEvent event) {
				form.setGroupTitle("Europe Formatting");
				setEurope();
				dateTimeItem.setUseMask(true);
				dateItem.setUseMask(true);
				form.markForRedraw("updated visibility");
			}
		});
		
		form.setItems(dateTimeItem, dateItem, setUSAButton, setEuropeButton);
		
		layout.setMembers(form);  
		layout.draw();  
	}
	
	private void setEurope(){
		setFormat("DMY", "dd/MM/yyyy", "HH:mm");
	}
	
	private void setUSA(){
		setFormat("MDY", "MM/dd/yyyy", "HH:mm");
	}
	
	private void setFormat(String mdy, final String shortDatePattern, String time){
		final String shortDateTimePattern = shortDatePattern + " " + time;
		DateUtil.setInputFormat(mdy);
		
		DateUtil.setShortDateDisplayFormatter(new DateDisplayFormatter(){
			@Override
			public String format(Date date) {
				if(date == null) return null;
				DateTimeFormat format = DateTimeFormat.getFormat(shortDatePattern);
				return format.format(date);
			}
		});
		
		DateUtil.setShortDatetimeDisplayFormatter(new DateDisplayFormatter(){
			@Override
			public String format(Date date) {
				if(date == null) return null;
				DateTimeFormat format = DateTimeFormat.getFormat(shortDateTimePattern);
				return format.format(date);
			}
		});		
	}
}

[Isomorphic]

Your code sets the global *default* formatters and inputFormat for date widgets - ie, the defaults that are used when widgets are created. Setting global defaults doesn't usually affect settings on widgets that already exist.

In this case, certainly you'd need to call setInputFormat() on your DateItems - but you should recreate UI elements that require the new defaults - just save the values of your form and recreate it with the same values.

Your setting of useMask on DateItem happens to work in this case because of unrelated internal code that rebuilds the item silently - we've fixed the height issue you found, anyway, but the correct way to fix your code is to recreate the widgets that need the new item defaults.