3 Replies Latest reply on Aug 27, 2009 5:32 AM by Yogi_ACE

    Question ComboBox skining

    Abbas AB Level 1

      Hi, i want to get the combo box like this

      combo.PNG

      any body knows how to apply styling on the combobox so i can get in above form the combobox.

        • 1. Re: Question ComboBox skining
          Niranjan_swain

          hello i give a example given below

           

           

          private var _valueCombo:ComboBox = new ComboBox();

           

           

          [Bindable]

          [Embed(source='//assets/image/blackBlue/ComboBoxArrow_disabledSkin.png')]

          private var blackBulueComboDesableSkin:Class;

          [Bindable]

          [Embed(source='//assets/image/blackBlue/ComboBoxArrow_downSkin.png')]

          private var blackBulueComboDownSkin:Class;

          [Bindable]

          [Embed(source='//assets/image/blackBlue/ComboBoxArrow_overSkin.png')]

          private var blackBulueComboOverSkin:Class;

          [Bindable]

          [Embed(source='//assets/image/blackBlue/ComboBoxArrow_upSkin.png')]

          private var blackBulueComboUpSkin:Class;

          [Bindable]

          [Embed(source='//assets/image/blackBlue/ComboBoxArrow_editableDisabledSkin.png')]

          private var blackBulueComboEditDesableSkin:Class;

          [Bindable]

          [Embed(source='//assets/image/blackBlue/ComboBoxArrow_editableDownSkin.png')]

          private var blackBulueComboEditDownSkin:Class;

          [Bindable]

          [Embed(source='//assets/image/blackBlue/ComboBoxArrow_editableOverSkin.png')]

          private var blackBulueComboEditOverSkin:Class;

          [Bindable]

          [Embed(source='//assets/image/blackBlue/ComboBoxArrow_editableUpSkin.png')]

          private var blackBulueComboEditUpSkin:Class;

           

           

          private function applySkinOnCombo():void

          {

          _valueCombo.setStyle("disabledSkin", blackBulueComboDesableSkin);

          _valueCombo.setStyle("downSkin", blackBulueComboDownSkin);

          _valueCombo.setStyle("overSkin", blackBulueComboOverSkin);

          _valueCombo.setStyle("upSkin", blackBulueComboUpSkin);

          _valueCombo.setStyle("color", 0x000000);

          _valueCombo.setStyle("textRollOverColor", 0x13ACFF);

          _valueCombo.setStyle("textSelectedColor", 0x13ACFF);

          _valueCombo.setStyle("editableDisabledSkin", blackBulueComboEditDesableSkin);

          _valueCombo.setStyle("editableDownSkin", blackBulueComboEditDownSkin);

          _valueCombo.setStyle("editableOverSkin", blackBulueComboEditOverSkin);

          _valueCombo.setStyle("editableUpSkin", blackBulueComboEditUpSkin);

           

          _valueCombo.setStyle("backgroundAlpha",1);

          _valueCombo.setStyle("alternatingItemColors", [0xCCCCCC, 0x999999]);

          }

           

          i think this will help u.

          actually i wrote all possible style apply to the combobox. but u use ur requirement.

           

          if it helps u then give me mark.

           

          Thanks

          Niranjan

          1 person found this helpful
          • 2. Re: Question ComboBox skining
            ShardulSingh Level 3

            Hi, I am putting here the style for the ComboBox, besides that you have to create different arrow images for acheiving this.

            Which I am using in this style.

             

             

             

            ComboBox

            {

            color : "0xFFFFFF";

            disabledSkin: Embed(source="assets/style/images/ComboBoxArrow_disabledSkin.png",

            scaleGridLeft="4", scaleGridTop="4", scaleGridRight="64", scaleGridBottom="18");

            downSkin: Embed(source="assets/style/images/ComboBoxArrow_downSkin.png",

            scaleGridLeft="4", scaleGridTop="4", scaleGridRight="64", scaleGridBottom="18");

            editableDisabledSkin: Embed(source="assets/style/images/ComboBoxArrow_editableDisabledSkin.png",

            scaleGridLeft="0", scaleGridTop="0", scaleGridRight="17", scaleGridBottom="22");

            editableDownSkin: Embed(source="assets/style/images/ComboBoxArrow_editableDownSkin.png",

            scaleGridLeft="0", scaleGridTop="0", scaleGridRight="17", scaleGridBottom="22");

            editableOverSkin: Embed(source="assets/style/images/ComboBoxArrow_editableOverSkin.png",

            scaleGridLeft="0", scaleGridTop="0", scaleGridRight="17", scaleGridBottom="22");

            editableUpSkin: Embed(source="assets/style/images/ComboBoxArrow_editableUpSkin.png",

            scaleGridLeft="0", scaleGridTop="0", scaleGridRight="17", scaleGridBottom="22");

            overSkin: Embed(source="assets/style/images/ComboBoxArrow_overSkin.png",

            scaleGridLeft="4", scaleGridTop="4", scaleGridRight="64", scaleGridBottom="18");

            upSkin: Embed(source="assets/style/images/ComboBoxArrow_upSkin.png",

            scaleGridLeft="4", scaleGridTop="4", scaleGridRight="64", scaleGridBottom="18");

            }

             

             

             

            with Regards,

             

            Shardul Singh Bartwal

            • 3. Re: Question ComboBox skining
              Yogi_ACE Level 2

              Using Simple CSS Scaling,

               

              -------------------

               

              ComboBox

              {

              upSkin:Embed(source='Assets/Img/dropdown_bg.png', scaleGridLeft=10, scaleGridRight=82, scaleGridTop=19, scaleGridBottom=20);

              downSkin:Embed(source='Assets/Img/dropdown_bg.png', scaleGridLeft=10, scaleGridRight=82, scaleGridTop=19,scaleGridBottom=20);

              overSkin:Embed(source='Assets/Img/dropdown_bg.png', scaleGridLeft=10, scaleGridRight=82, scaleGridTop=19,scaleGridBottom=20);

              disabledSkin: Embed(source='Assets/Img/dropdown_bg.png', scaleGridLeft=10, scaleGridRight=82, scaleGridTop=19,scaleGridBottom=20);

              padding-left: 25;

              color:#ffffff;

              dropdownStyleName: dropdownStyleName;

              }

              /* Style for your dropdown pane */

              .dropdownStyleName

              {

              background-color: #2b2a2a;

              border-color: #2e2821;

              selectionColor:#3e3d3d;

              rollOverColor:#3e3d3d;

              textRollOverColor:#ffffff;

              textSelectedColor:#ffffff;

              color: #ffffff;

              padding-left:25;

              }

               

               

              ----------------------------

              Try using your color combinations

              Done?

              Are you Happy?

               

              Best Regards,

              Yogesh