콤보박스 스킨작업 시 주의할 점

에어나 플렉스에서 combobox 스킨을 변경해야 하는 경우가 대부분인데.

combobox 는 크게 두가지 combobox + dropdown(list) 로 구성되어 있어 따로 skin 작업을 해줘야 한다.

보통 이미지로 스킨을 입힐꺼기 때문에 bitmap 으로 스킨을 만드는데

var cb:ComboBox = new ComboBox();

//combobox 자체의 스킨

cb.setStyle("upSkin", new Bitmap(...)); //보통상태일때 스킨

cb.setStyle("downSkin", new Bitmap(...)); //클릭한 상태일때 스킨

cb.setStyle("overSkin", new Bitmap(...)); //마우스가 오버상태일때 스킨

cb.setStyle("disabledSkin", new Bitmap(...)); //disable 상태일때 스킨

//dropdown(list)의 스킨

cb.dropdown.setRendererStyle("upSkin", new Bitmap(...));

cb.dropdown.setRendererStyle("downSkin", new Bitmap(...));

cb.dropdown.setRendererStyle("overSkin", new Bitmap(...));

cb.dropdown.setRendererStyle("disabledSkin", new Bitmap(...));

cb.dropdown.setRendererStyle("selectedUpSkin", new Bitmap(...)); //현재 선택된 아이템의 보통상태 스킨

cb.dropdown.setRendererStyle("selectedOverSkin", new Bitmap(...)); //현재 선택된 아이템의 마우스 오버시 상태 스킨

cb.dropdown.setRendererStyle("selectedDownSkin", new Bitmap(...)); //현재 선택된 아이템의 마우스 클릭 시 스킨

문제는 붉은 부분과 같이 dropdown의 스킨을 처리를 할 경우 스크롤을 하다 보면 

"The supplied DisplayObject must be a child of the caller." 오류가 발생하게 된다.

이부분을 해결하기 위해서 아래와 같이 별도의 cellRenderer 를 만들어서 해결해야 한다.

public class ComboBoxRender extends CellRenderer

{

    public function ComboBoxRender()

    {

        super();

        

        this.setStyle("upSkin", new Bitmap(...));

        this.setStyle("overSkin", new Bitmap(...));

        this.setStyle("downSkin", new Bitmap(...));

        this.setStyle("selectedUpSkin", new Bitmap(...));

        this.setStyle("selectedOverSkin", new Bitmap(...));

        this.setStyle("selectedDownSkin", new Bitmap(...));

    }

}

//cellRender 적용

cb.dropdown.setStyle("cellRenderer", CellRenderer);