This is an update to my earlier post about
mx:ComboBox which, if set to a percentage width, will by default always take the width of the widest line it contains, widening possibly its container and/or changing the container to be scrollable.The solution I suggested earlier was not enough for example in case the ComboBox was on a panel which was not visible when it was created. Now I am using a different solution.
Basically you extend the ComboBox and override the protected
measure() method to cancel out the setting of minimum width set by the original code which is the cause the ComboBox will force its width upon its container.The following code has some more changes, like resizing the dropdown list to the width of the longest line it will display and also refusing even programmatic focusing when either disabled or hidden.
Did you know, that if the focus already is on the standard ComboBox, then disabling or even hiding it does not block the keyboard input? For example, the
[Down] and [Up] keys still change the items within the invisible ComboBox with all the corresponding events triggering, and [CTRL-Down] will still open the dropdown list even though the ComboBox itself is hidden and disabled?public class ComboBoxEx extends ComboBox
{
private var initDone:Boolean;
public var preferredDropdownWidth:Number;
public function ComboBoxEx()
{
super();
this.preferredDropdownWidth = NaN;
this.initDone = false;
this.addEventListener("dropdownWidthChanged",
function(event:Event):void { if (!initDone) preferredDropdownWidth = event.target.dropdownWidth; });
this.addEventListener(FlexEvent.INITIALIZE,
function(event:Event):void { initDone = true; });
}
/** A property indicating if the combobox should resize itself to the width of its contents */
[Inspectable(category="General", enumeration="true,false", defaultValue="false")]
public var resizeWidthToContent:Boolean = false;
/**
* A property indicating if the dropdown of the combobox should resize its width to the width of the longest
* label within the combobox'es data, though never below the width of the combobox itself.
* NOTE! that if you leave this property to its default value of true then the property dropdownWidth
* will not be respected if it happens to be smaller than the width of the longest label in the combobox.
*/
[Inspectable(category="General, enumeration="true,false", defaultValue="false")]
public var resizeDropdownWidthToContent:Boolean = true;
/**
* @private
*/
override protected function keyDownHandler(event:KeyboardEvent):void
{
// Handle keyboard only if we are enabled and visible!
if (super.enabled && super.visible)
super.keyDownHandler(event);
}
/**
* @private
*/
override public function setFocus():void
{
// Take focus only if we are enabled and visible!
if (super.enabled && super.visible)
super.setFocus();
}
/**
* The super method determines the measuredWidth and measuredHeight
* properties of the control.
* This version will reset the measuredWidth property to the value of
* UIComponent.DEFAULT_MEASURED_WIDTH unless the resizeWidthToContent
* property is set.
* @see mx.core.ComboBase#measure()
*/
override protected function measure():void
{
super.measure();
if (!this.resizeWidthToContent) measuredMinWidth = DEFAULT_MEASURED_MIN_WIDTH;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (this.resizeDropdownWidthToContent && isNaN(this.preferredDropdownWidth))
{
var width:Number = getContentMaxWidth().width + getStyle("arrowButtonWidth");
this.dropdownWidth = Math.max(this.width, width);
}
}
public function getContentMaxWidth():Object
{
return calculatePreferredSizeFromData(this.collection.length);
}
}
I also opened a bug about it.
