One of the many grievances I have with the otherwise wonderful Adobe Flex is the way the ComboBox component with percentage width resizes itself to accommodate the data which is loaded into it. There seems to be no switch to disable this behavior and yet retain the scalability of the ComboBox control itself.
The problem manifests itself best when you have, for example, two adjacent ComboBox widgets both set to be 50% width and you assign to the first a list of rows with short names and to the other a list of rows with long names - both widgets will resize themselves to a different width to accommodate their respective contents.
After searching for and failing to find a solution to this, I decided to try and write a workaround myself. I needed to fixate the width of the comboboxes right after they were first displayed and before they got their data. There was no need for the combobox to be resized later. In order to do this, I extended the original ComboBox and added the following code to it:
First I added a property via which you can turn on or off the new functionality:
/**
* Property indicating if the initially measured width of the combobox will be
* fixed as soon as the combobox has been layed out.
* Only applies to combobox'es which have their width specified as a percentage.
*/
[Inspectable(category="General", enumeration="true,false", defaultValue="false")]
public var fixPercentWidthAfterInitialMeasurement:Boolean = false;
Second, to the constructor of the combobox, I added an event listener:
public function AComboBox()
{
super();
this.addEventListener(FlexEvent.UPDATE_COMPLETE, handleUpdateComplete);
}
Finally, I added the event handler method:
/**
* This eventhandler is called right before the widget is drawn on screen - it's size has already been calculated,
* but it has not yet received its contents, therefore now it is good time to convert its percentage width into
* an explicit width, so that future data loaded into the combobox would not resize the compobox causing scrolling.
*/
private function handleUpdateComplete(event:FlexEvent):void
{
if (this.fixPercentWidthAfterInitialMeasurement &&
(!isNaN(this.percentWidth))) this.explicitWidth = this.width;
}
The idea here is to capture the event which is dispatched after the ComboBox size has been determined, right before the combobox is drawn on screen. Each ComboBox can have its width specified either explicitly in pixels or as a percentage of the containers width. When the width of the ComboBox is set as a percentage, I now assign its actual pixel width to the explicitWidth property. This will fixate the width and also stop the ComboBox from automatically resizing itself.
That solved the situation for me - the ComboBox retained its size after the initial layout.
