6 Replies Latest reply on Feb 19, 2010 3:10 PM by laxmidi

    Style function for items in a combobox

    nikos101 Level 2

      Is it possible to have a style function for items in a combobox?

        • 1. Re: Style function for items in a combobox
          Gregory Lafrance Level 6

          What do you mean by a style function?

          • 2. Re: Style function for items in a combobox
            nikos101 Level 2

            Different rows different colour according to data.

             

            best wishes

             

            Nikos

            • 3. Re: Style function for items in a combobox
              JeffryHouser Level 4

              Use an itemRenderer?

              • 4. Re: Style function for items in a combobox
                Gregory Lafrance Level 6

                You can have the itemRenderer change the color based on data in the dataprovider that specifies the color, or you can just have the renderer change color based on the value of the data.

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                  <mx:Script>
                    <![CDATA[
                      import mx.collections.ArrayCollection;
                      import mx.controls.CheckBox;
                      
                      private var arr:Array = [
                        {name: "Bob Smith", FLAG: false},
                        {name: "Fred Tompas", FLAG: false},
                        {name: "Mary Freeman", FLAG: false},
                        {name: "Tim Thorat", FLAG: false}
                      ];
                      
                      [Bindable] public var ac:ArrayCollection = new ArrayCollection(arr);
                      [Bindable] public var selectedNames:ArrayCollection = new ArrayCollection();
                      
                      private function selectedOnly(item:Object, idx:uint, arr:Array):Boolean {
                        return (item.FLAG == "true");
                      }
                    ]]>
                  </mx:Script>
                  <mx:DataGrid id="dg" dataProvider="{ac}">
                    <mx:columns>
                      <mx:DataGridColumn dataField="name" width="100" headerText="Name"/>
                      <mx:DataGridColumn dataField="FLAG" width="200" headerText="Selected">
                        <mx:itemRenderer>
                          <mx:Component>
                            <mx:VBox>
                              <mx:CheckBox id="chbx" selectedField="FLAG" change="onChange(event);" label="Selected"
                                color="{data.FLAG==true?0x00FF00:0xFF0000}">
                                <mx:Script>
                                  <![CDATA[
                                    import mx.controls.Alert;
                                    private function onChange(evt:Event):void {
                                      data.FLAG = !data.FLAG;
                                      if(data.FLAG == true){
                                        chbx.setStyle("color", 0x00FF00);
                                        outerDocument.selectedNames.addItem(data.name);
                                      }else{
                                        if(outerDocument.selectedNames.contains(data.name)){
                                          chbx.setStyle("color", 0xFF0000);
                                          outerDocument.selectedNames.removeItemAt(outerDocument.selectedNames.getItemIndex(data.name));                        
                                        }
                                      }
                                    }
                                  ]]>
                                </mx:Script>
                              </mx:CheckBox>
                            </mx:VBox>
                          </mx:Component>
                        </mx:itemRenderer>            
                      </mx:DataGridColumn>
                    </mx:columns>
                  </mx:DataGrid>
                  <mx:List dataProvider="{selectedNames}"/>
                </mx:Application>
                
                


                If this post helps, please mark it as such.


                Greg Lafrance - Flex 2 and 3 ACE certified

                www.ChikaraDev.com

                Flex / AIR Development, Training, and Support Services

                • 5. Re: Style function for items in a combobox
                  nikos101 Level 2

                  I need the rows in a combobox to change colour

                  • 6. Re: Style function for items in a combobox
                    laxmidi Level 1

                    Hi,

                     

                    You can alternate the background color of the rows by using:  combobox's alternatingItemColors="[0xEEEEEE, 0xFFFFFF]" .

                     

                    If you want the actual items in the combobox to be different colors, then check out this link:

                         http://blog.flexexamples.com/2007/09/25/creating-a-custom-combobox-item-renderer-in-flex/

                     

                    It shows how to make an item renderer for the combobox. You'll need to change it to make the colors different, but it should help you.

                     

                    -Laxmidi