DateRangeItem default width for to and from subfields is unexpectedly big

[michaelplavnik]

Please have a look at the attached screen shot. This how DateRangeItem looks by default in ToolStrip. Its apparent that its unconstrained width is twice bigger then necessary to hold formatted date value.


Is there a way to let SmartClient/SmartGwt component to size in accordance with format?


Example to let default values show (and also simulating somewhat ToolStrip.addFormItem in SmartGwt)

isc.DynamicForm.create({
ID: "dateRangeForm",
cellPadding:3,
minWidth:50,
numCols:1,
fields: [
{name: "dateRangeItem", editorType: "DateRangeItem", showTitle: false, allowRelativeDates: false }
]
});

isc.ToolStrip.create({
width: 650,
members: [ dateRangeForm ]
});


Also, another questions about integrating form items into ToolStrip.

Lets say I have a radio button group in the toolstrip, and one of the selected values will set visible on the form wrapping date range item, others will hide the form. What is the best way to implement it?

I have tried directly coding it with click event handler, but ended up with width of the form suddenly expanding such that From became far away from To. In example below, click hide and then show buttons.

isc.DynamicForm.create({
ID: "dateRangeForm",
cellPadding:1,
minWidth:50,
numCols:1,
fields: [
{name: "dateRangeItem", editorType: "DateRangeItem", showTitle: false, allowRelativeDates: false, fieldLayout:'horizontal' }
]
});
isc.ToolStripButton.create({
ID: "showDateRangeButton",
title: "Show",
click: function() {
dateRangeForm.setVisibility('visible')
}

});
isc.ToolStripButton.create({
ID: "hideDateRangeButton",
title: "Hide",
click: function() {
dateRangeForm.setVisibility('hidden')
}

});
isc.ToolStrip.create({
width: '100%',
members: [ showDateRangeButton, hideDateRangeButton, dateRangeForm ]
});

[Isomorphic]

We believe you have an answer for your first question.

On your other question:

1) There *is* a bug here, but it's the initial layout that was "wrong" - that is, your settings should have resulted in the "expanded" layout initially, as well as later. If you want to know why, it's because the DynamicForm has no specified width and the child FormItems in the DateRangeItem have column-widths set to "*" - this results in the items expanding and overflowing their form, until it fills the space in the ToolStrip.

You didn't mention your version, but we've fixed this bug in 13.0 for today's builds, dated April 14, and we'll port the fix back to earlier branches today.

2) Note that DateRangeItem is a bit of an edge, because it has a child form with a dynamic layout and formItem's of its own - but you can deal with it in several ways - for example

- give the form a small width and overflow (internally we use width:1, height:1, overflow:"visible"), to make it start out small and overflow to the minimum size required for the items, with no excess spacing
- use the documented API ToolStrip.addFormItem() - this wraps your formItems in a form with width:1, height:1, overflow:"visible" already set
- on the ToolStrip, set layoutAlign:"left" and add an isc.LayoutSpacer.create({width:"100%"}) as the last member