Question

I have “created” a custom skin for DropDownList (i.e modified the default spark.skins.spark.DropDownListSkin) and spark.skins.spark.DropDownListButtonSkin for its button.

I have been able to get it to do almost everything I wanted, except for getting the list that drops down to align to the right of the button. Setting <s:PopUpAnchor popUpWidthMatchesAnchorWidth=*false* /> in the button sub-skin allows the list to be determined by the width of the items, because obviously the width of the button/entire control is far less than required.

Here is what it looks like now (default popUpPosition=”bottom”)

Setting popUpPosition=”right”

Here is what I would like it to look like

So at this point, I either need to dig into all the spark source code for DropDownList to better understand how things work, or perhaps someone here knows how to do this already.

Any ideas would be appreciated.

Answer 1

You can create a custom PopUpAnchor class which extends from PopUpAnchor, and override its determinePosition function to modify how PopUpPosition.BELOW behaves:

override mx_internal function determinePosition(placement:String,
  popUpWidth:Number, popUpHeight:Number,matrix:Matrix,
  registrationPoint:Point, bounds:Rectangle):void
{
  switch(placement)
  {
    case PopUpPosition.BELOW:
      registrationPoint.x = -popUpWidth + unscaledWidth;
      registrationPoint.y = unscaledHeight;
      break;
    case PopUpPosition.ABOVE:
      registrationPoint.x = 0;
      registrationPoint.y = -popUpHeight;
      break;
    case PopUpPosition.LEFT:
      registrationPoint.x = -popUpWidth;
      registrationPoint.y = 0;
      break;
    case PopUpPosition.RIGHT:
      registrationPoint.x = unscaledWidth;
      registrationPoint.y = 0;
      break;            
    case PopUpPosition.CENTER:
      registrationPoint.x = (unscaledWidth - popUpWidth) / 2;
      registrationPoint.y = (unscaledHeight - popUpHeight) / 2;
      break;            
    case PopUpPosition.TOP_LEFT:
      // already 0,0
      break;
  }
}

Setting registrationPoint.x = -popUpWidth + unscaledWidth aligns it with the right edge of the button.

Within your DropDownList skin replace the PopUpAnchor tag with your newly created class and you should have a DropDownList which behaves as you requested.

Perhaps there’s a saner way of doing this, but I’d rather spend my time not finding out what that is.