1 Reply Latest reply on Jul 20, 2009 2:40 AM by ShardulSingh

    how to dynamically change text color of an item in a List

    SPGAnne Level 1

      I have a list of items displayed in a List control.  At runtime, I want to iterate thru the items in that list and change the color of some of the items based on various logic.  I can't figure out how to get the color property of each item's item renderer.  Also how should I best handle what happens when the list is scrolled and item renderers are recycled?  Thanks VERY much in advance for anyone who can help with this.

        • 1. Re: how to dynamically change text color of an item in a List
          ShardulSingh Level 3

          Hi,

           

          I am here with the solution of your problem.I am using a List control in which I am showing the items by three different colors.On click of the any row its color will be changed to the purple i.e. '0xFF00FF'. Also your problem related to the scrolling will be resolved.For resolving that issue we have to must override the set data method inside the 'itemRenderer'.I have already written code for that,so you dont need to worry.Here are the two classes one is the

          main Application class and the another one is the item Renderer for the list control i.e. 'listItemRenderer.mxml', put this also in the same folder where you are putting the main Application. Simply copy and paste the code below.Hope this will fullfill your requirement.

           

           

          Main Application

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical">
             
              <mx:Script>
                  <![CDATA[
                      import mx.collections.ArrayCollection;
                      import mx.events.ListEvent;
                     
                      [Bindable]
                        private var listDataArrayCollection:ArrayCollection=
                        new ArrayCollection([
                          {seq:'1',color:'0xFF0000', names:'John'},
                          {seq:'2',color:'0x00FF00', names:'Alex'},
                          {seq:'3',color:'0x0000FF', names:'Peter'},
                          {seq:'4',color:'0xFF0000', names:'Sam'},
                          {seq:'5',color:'0x00FF00', names:'Alis'},
                          {seq:'6',color:'0x0000FF', names:'Robin'},
                          {seq:'7',color:'0xFF0000', names:'Mark'},
                          {seq:'8',color:'0x00FF00', names:'Steave'},
                          {seq:'9',color:'0x0000FF', names:'Fill'},
                          {seq:'10',color:'0xFF0000', names:'Abraham'},
                          {seq:'11',color:'0x00FF00', names:'Hennery'},
                          {seq:'12',color:'0x0000FF', names:'Luis'},
                          {seq:'13',color:'0xFF0000', names:'Herry'},
                          {seq:'14',color:'0x00FF00', names:'Markus'},
                          {seq:'15',color:'0x0000FF', names:'Flip'},
                          {seq:'16',color:'0xFF0000', names:'John_1'},
                          {seq:'17',color:'0x00FF00', names:'Alex_1'},
                          {seq:'18',color:'0x0000FF', names:'Peter_1'},
                          {seq:'19',color:'0xFF0000', names:'Sam_1'},
                          {seq:'20',color:'0x00FF00', names:'Alis_1'},
                          {seq:'21',color:'0x0000FF', names:'Robin_1'},
                          {seq:'22',color:'0xFF0000', names:'Mark_1'},
                          {seq:'23',color:'0x00FF00', names:'Steave_1'},
                          {seq:'24',color:'0x0000FF', names:'Fill_1'},
                          {seq:'25',color:'0xFF0000', names:'Abraham_1'},
                          {seq:'26',color:'0x00FF00', names:'Hennery_1'},
                          {seq:'27',color:'0x0000FF', names:'Luis_1'},
                          {seq:'28',color:'0xFF0000', names:'Herry_1'},
                          {seq:'29',color:'0x00FF00', names:'Markus_1'},
                          {seq:'30',color:'0x0000FF', names:'Flip_2'},
                          {seq:'31',color:'0xFF0000', names:'John_2'},
                          {seq:'32',color:'0x00FF00', names:'Alex_2'},
                          {seq:'33',color:'0x0000FF', names:'Peter_2'},
                          {seq:'34',color:'0xFF0000', names:'Sam_2'},
                          {seq:'35',color:'0x00FF00', names:'Alis_2'},
                          {seq:'36',color:'0x0000FF', names:'Robin_2'},
                          {seq:'37',color:'0xFF0000', names:'Mark_2'},
                          {seq:'38',color:'0x00FF00', names:'Steave_2'},
                          {seq:'39',color:'0x0000FF', names:'Fill_2'},
                          {seq:'40',color:'0xFF0000', names:'Abraham_2'},
                          {seq:'41',color:'0x00FF00', names:'Hennery_2'},
                          {seq:'42',color:'0x0000FF', names:'Luis_2'},
                          {seq:'43',color:'0xFF0000', names:'Herry_2'},
                          {seq:'44',color:'0x00FF00', names:'Markus_2'},
                          {seq:'45',color:'0x0000FF', names:'Flip_2'}
                      ]);
                     
                      private function onItemClick(event : ListEvent):void
                      {
                          var dataObj : Object = event.itemRenderer.data;
                          dataObj.color = "0xFF00FF";
                          event.itemRenderer.data = dataObj;
                      }
                  ]]>
              </mx:Script>
              <mx:VBox width="300" height="100%"
                  horizontalAlign="center"
                  verticalAlign="middle">
                      <mx:List id="listComponent" width="50%"
                           height="100%"
                           borderStyle="none"
                           itemRenderer="listItemRenderer"
                           dataProvider="{listDataArrayCollection}"
                           itemClick="onItemClick(event)"/>
              </mx:VBox>
          </mx:Application>

           

           

           

           

           

          listItemRenderer.mxml

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
              width="100" height="30" horizontalGap="5">
          <mx:Script>
              <![CDATA[
                  override public function set data(value:Object):void
                   {
                       super.data = value;
                   }
              ]]>
          </mx:Script>
                  <mx:Label width="30"  height="30" text="{data.seq}" />
                  <mx:TextInput width="75" height="30"
                       text="{data.names}"
                       editable="false" backgroundColor="{data.color}"/>
              </mx:HBox>

           

           

           

           

           

           

          ******************************

          Shardul Singh Bartwal