3 Replies Latest reply on Mar 10, 2010 2:57 PM by Flex harUI

    ComboBox with custom ItemRenderer

    Zolotoj Level 3

      This is my combobox where I am trying to have a custom renderer:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/halo">
           <fx:Script>
                <![CDATA[
                import mx.events.FlexEvent;
                import mx.collections.ArrayCollection;
                import mx.controls.CheckBox;
                public var datas:XML;
                [Bindable]
                var ItemRenderer:ClassFactory;     
                override public function set data(value:Object):void
                {
                     dataProvider = datas["sku" + value.sku];
                     ItemRenderer = new ClassFactory(comboBoxCheckBoxItemRenderer);     
                     itemRenderer = ItemRenderer;
                }               
                public function saveCheckState(evt:Event):void
                {
                     var dataProviderItem:Object = dataProvider.getItemAt(dataProvider.getItemIndex(selectedItem));
                     dataProviderItem.selected = CheckBox(evt.currentTarget).selected;
                     dataProvider.setItemAt(dataProviderItem, dataProvider.getItemIndex(selectedItem));     
                }
                ]]>
           </fx:Script>     
      </mx:ComboBox>
      
       
       
      This combobox is used as a custom itemrenderer in datagrid.
      Here is code for comboBoxCheckBoxItemRenderer:
      package modulecode
      {
           import mx.containers.HBox;
           import mx.controls.CheckBox;
           import mx.controls.Label;
           import mx.controls.Spacer;
       
           public class comboBoxCheckBoxItemRenderer extends HBox
           {
                private var action:Label;
                private var spacer:Spacer;
                private var checkBox:CheckBox;
                public function comboBoxCheckBoxItemRenderer()
                {
                     super();
                }
                override protected function createChildren():void {
                     
                     // Call the createChildren() method of the superclass.
                     super.createChildren();
                     action = new Label();
                     // Add the child component to the custom component.
                     addChild(action);
                     spacer = new Spacer();
                     spacer.percentWidth = 100;
                     // Add the child component to the custom component.
                     addChild(spacer);
                     checkBox = new CheckBox();
                     // Add the child component to the custom component.
                     addChild(checkBox);
                }     
                override public function set data(value:Object):void
                {
                     action.text = value.action;
                     checkBox.selected = value.selected;
                }     
           }
      }
      
      What's happening is that nothing is happening untill I drop combobox down in the grids. As the result checkboxes are not selected properly.
      Any help?
      
      
       
      

        • 1. Re: ComboBox with custom ItemRenderer
          Flex harUI Adobe Employee

          If you are using XML data, be aware that strings "true" and "false" don't

          coerce to Boolean in an intuitive way

          • 2. Re: ComboBox with custom ItemRenderer
            Zolotoj Level 3

            How would I set up a custom itemrenderer to use data binding but properly have selected property in the following code:

            <<mx:itemRenderer>
                      <fx:Component>
                           <mx:HBox width="100%">
                                <mx:Label text="{XML(data).action}"/>
                                <mx:Spacer width="100%"/>
                                <mx:CheckBox id="check" selected="{XML(data).selected}"
                                                change="outerDocument.saveCheckState(event);"/>
                           </mx:HBox>
                      </fx:Component>
                 </mx:itemRenderer>
            

            • 3. Re: ComboBox with custom ItemRenderer
              Flex harUI Adobe Employee

              I would try

              selected="{XML(data).selected == "true"}"