1 Reply Latest reply on Dec 12, 2010 12:06 PM by Shongrunden

    change color of item in Spark List (not using the itemrenderer)

    WallyBeez

      I have a spark list(<s:List) with an empty s:ArrayList that I populate later with an ItemRenderer and value Objects using a for loop and the following syntax:

       

       

      var myItems:myValueObject = new myValueObject ()

      myItems.string= strArray[j];

      myItems.currentItemNum = j;

      myDataProvider.addItem(myItems);

       

      Is there any way I can access the items in this list and change the background color of each item, or even set the states. Right now I only access the Value Objects which have no other properties except the ones I created.

       

      To clarify what I mean by this, each item in the item renderer changes color etc based on the set states within the item renderer itself. But is there a way to change the item state from the main application? Or maybe I am using my Value Objects incorrectly or something.

       

      Thanks for the help.

       

      Message was edited by: WallyBeez

        • 1. Re: change color of item in Spark List (not using the itemrenderer)
          Shongrunden Adobe Employee

          You could access the renderer instances directly via the getElementAt() method of the List's dataGroup skin part, but that won't work well when virtual layout is on (by default) and is not recommended.  A better approach is to have the color value in your data item and have the renderer react to changes in the data.

           

          Here's an example:

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:local="*">

           

              <s:controlBarContent>

                  <s:Button label="change color"  click="myList.dataProvider.getItemAt(0).color = 0xe3e3e3"/>

              </s:controlBarContent>

           

              <s:List id="myList">

                  <s:dataProvider>

                      <s:ArrayList>

                          <local:DataItem label="test 1" color="0xFF0000" />

                          <local:DataItem label="test 2" color="0x00FF00" />

                          <local:DataItem label="test 3" color="0x0000FF" />

                      </s:ArrayList>

                  </s:dataProvider>

                  <s:itemRenderer>

                      <fx:Component>

                          <s:ItemRenderer>

                              <fx:Script>

                                  <![CDATA[

                                      override public function set data(value:Object):void {

                                          super.data = value;

                                          if (!data)

                                              return;

           

                                          bgColor.color = data.color;

                                          lbl.text = data.label;

                                      }

                                  ]]>

                              </fx:Script>

                              <s:Rect width="100%" height="100%">

                                  <s:fill>

                                      <s:SolidColor id="bgColor" />

                                  </s:fill>

                              </s:Rect>

                              <s:Label id="lbl" />

                          </s:ItemRenderer>

                      </fx:Component>

                  </s:itemRenderer>

              </s:List>

           

          </s:Application>

           

          DataItem.as:

          package

          {

              public class DataItem

              {

                  [Bindable] public var label:String;

                  [Bindable] public var color:Number;

              }

          }