5 Replies Latest reply on Oct 31, 2010 2:47 AM by bryant_16

    Icons(images in Combobox) read from folder in project

    bryant_16 Level 1

      Hi everyone,

       

      I'm trying to populate these icons (images) from the img folder under my project. Most of these icons are in .png format and I want to populate them into the ComboBox which i have. On top of that, when the user selects one of the icons from the ComboBox, I need to show the icon on the ComboBox which now I'm only able to show the label that is being tagged to it. I saw the IconComboBox.as example but I can't apply them to my current design.

       

      Is there a way to achieve it?

       

      My codes for the CheckBoxes and ComboBoxes:

       

      <mx:Panel id="layerPanel" backgroundColor="#ffffff" height="220" width="220"
        title="Layer Control Manager" showEffect="WipeRight" hideEffect="WipeLeft"
        horizontalScrollPolicy="off" verticalScrollPolicy="off">
        <mx:VBox height="140" width="400" horizontalScrollPolicy="off">
         <mx:List id="layerList" itemClick="layerList_changeHandler(event)"
         alternatingItemColors="[#EEEEEE, white]" selectable="true"
         dataProvider="{lstDataProvider}" labelField="name" height="190" verticalScrollPolicy="off">
         <mx:itemRenderer>
          <mx:Component>
           <mx:HBox>
            <mx:CheckBox id="chkBox" change="layerCheckBox_onChange(event);">
            <mx:Script>
            <![CDATA[
           
            import mx.controls.Alert;
            import mx.events.FlexEvent;
           
            override public function set data(value:Object):void
            {
             super.data = value;
             if(value != null)
             {
              chkBox.selected = value.isSelected;
              if(!chkBox.selected)
              {
               comboBox.selectedIndex = -1;
               comboBox.prompt = "Please Select";        
               comboBox.enabled = false;
              }
             }
            }
            private function layerCheckBox_onChange(evt:Event):void
            {
             data.isSelected = !data.isSelected;
             if(data.isSelected)
             {
              comboBox.enabled = true;
             }
             else
             {
              comboBox.enabled = false;
             }
             if(data.isSelected && comboBox.selectedIndex > -1)
             {
              this.dispatchEvent(new Event("addImageToApplication", true));
             }
            }
            ]]>
            </mx:Script>
            </mx:CheckBox>
            <mx:Label text="{data.label}" />
            <mx:ComboBox id="comboBox" enabled="false" width="100%" change="onComboBoxChange(event)" dataProvider="{outerDocument.comboBoxArray}" prompt="Please Select">
             <mx:Script>
              <![CDATA[
               import mx.controls.ComboBox;
              
               private function onComboBoxChange(evt:Event):void
               {
                var myCombo:ComboBox = evt.currentTarget as ComboBox;
               
                //if(data.label == myCombo.selectedItem.label)
                {
                 outerDocument.comboImageUrl = myCombo.selectedItem.src;
                 if(data.isSelected)
                 {
                  this.dispatchEvent(new Event("addImageToApplication", true));
                 }           
                }
               }
             
              ]]>
              </mx:Script>
             <mx:itemRenderer>
              <mx:Component>
               <mx:HBox horizontalScrollPolicy="off">
                <mx:Image source="{data.src}" width="20" height="20" maintainAspectRatio="false" />
                <mx:Label text="{data.label}" />
               </mx:HBox>
              </mx:Component>
             </mx:itemRenderer>
            </mx:ComboBox>
           </mx:HBox>
          </mx:Component>
         </mx:itemRenderer>
         </mx:List>
        </mx:VBox>

       

      <mx:VBox top="165" left="30">
        <mx:Button label="Reset List" width="160" id="resetBut" click="resetList()"/>
      </mx:VBox>
      </mx:Panel>