ComboBox dropdown scaling does not follow DisplayList

0
votes

I've been working on an application (with ComboBoxes) that requires scaling the entire application based on screen resolution. I thought it would simply require changing the "scaleX" and "scaleY" properties of the top-level application, but discovered that the ComboBox dropdown doesn't appear to scale accordingly, as in the following example:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   applicationComplete="init()">
    <mx:Script>
      <![CDATA[
        import mx.collections.ArrayCollection;
        private var options:ArrayCollection = new ArrayCollection([1,2,3,4]);

        public function init():void {
            this.scaleX = 5;
            this.scaleY = 5;
        }
      ]]>
   </mx:Script>

   <mx:ComboBox id="box" dataProvider="{this.options}"/>
</mx:Application>

The best I've been able to do with it is adding a "MouseEvent.MOUSE_DOWN" listener on the ComboBox and handling it like so:

var comboBox:ComboBox = event.currentTarget as ComboBox;
comboBox.dropdown.scaleX = 5; comboBox.dropdown.scaleY = 5;

which results in the dropdown appearing (sliding down) unscaled until it reaches it's extended length and stops at which point it scales up and remains at that scale until it is closed. I have also found that if you call "invalidateDisplayList()" on the comboBox or the dropdown, then it undoes the scaling, so it appears that whenever the updateDisplayList is called, the dropdown only applies it's parent ComboBox's scaling, and not the ComboBox's parent container's scaling.

I understand that, as a pop-up, the dropdown isn't in the Application's or ComboBox's displayList tree, which appears to be the root of the problem (no pun intended).

Anybody have any insights as to how to address this issue?

Thanks in advance!

3
apache-flexactionscript-3actionscriptflex3

3 Answers

1
votes

One option is to use a factory to generate your dropdown list, something like:

    <mx:ComboBox id="box" dataProvider="{this.options}">
        <mx:dropdownFactory>
            <mx:Component>
                <mx:List scaleX="5" scaleY="5"/>
            </mx:Component>
        </mx:dropdownFactory>
    </mx:ComboBox>

Not sure what other modifications you might need to make to get all the List's components rendering at the right scale.

0
votes

Not pefect but at least something like a solution. Add open event to your combobox in order to scale to parentApplication.

import mx.events.DropdownEvent;

// workaround combox listbox scalling
protected function mycombobox_openHandler(event:DropdownEvent):void
{               
  mycombobox.dropdown.scaleX = parentApplication.scaleX;
  mycombobox.dropdown.scaleY = parentApplication.scaleY;                
}
0
votes

You can try monkeypatching Flex SDK :)
Copy mx.controls.Combobox to your project and change lines 1507-1509:

var m:Matrix = transform.concatenatedMatrix;
_dropdown.scaleX = m.a; //scale x
_dropdown.scaleY = m.d; //scale y

to something like this:

_dropdown.scaleX = scaleX;
_dropdown.scaleY = scaleY;

Unfortunatelly you have to copy some classes from mx.styles.metadata (who used "include" in SDK, who?!)