StyleableTextField htmlText not working properly

Hi,

I am trying to customize the LabelItemRenderer so that I can use htmlText property. I used this CustomRenderer on my List component.

When the List loads, I can't see the effect of the bold and font colors tag but when I tried to scroll it I was able to see the effect of bold and font color tag.

How would I be able to see the effect of the bold and font colors without a need to scroll it before it take effect.

Here is the codes of the customize LabelItemRenderer :

package components

{

          import spark.components.HGroup;

          import spark.components.Label;

          import spark.components.LabelItemRenderer;

          import spark.components.supportClasses.StyleableTextField;

          public class CustomRenderer extends LabelItemRenderer

          {

                    public var hGroup:HGroup;

                    public var textLabel:StyleableTextField;

                    public function CustomRenderer()

                    {

                              super();

                    }

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

                    {

                              super.data = value;

                              if (!value) return;

                              invalidateProperties();

                    }

                    override protected function createChildren():void {

                              if (!hGroup)

                              {

                                        hGroup = new HGroup();

                                        hGroup.paddingLeft = 5;

                                        hGroup.paddingRight = 5;

                                        hGroup.verticalAlign = "middle";

                                        hGroup.percentWidth = 100;

                                        addChild(hGroup);

                              }

                    }

                    override protected function commitProperties():void

                    {

                              super.commitProperties();

                              if (!textLabel) {

                                        textLabel = StyleableTextField(createInFontContext(StyleableTextField));

                                        textLabel.styleName = this;

                                        textLabel.selectable = false;

                                        textLabel.editable = false;

                                        textLabel.multiline = true

                                        textLabel.wordWrap = true;

                                        hGroup.addElement(textLabel);

                              }

                              textLabel.htmlText = "<b><font color='#00ff00'>" + data.TextToDisplay + "</font></b>";

                              invalidateDisplayList();

                              invalidateSize();

                    }

                    // Override layoutContents() to lay out the HGroup container.

                    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void

                    {

                              // Make sure our width/height is in the min/max for the label

                              var childWidth:Number = unscaledWidth - 6;

                              childWidth = Math.max(hGroup.getMinBoundsWidth(), Math.min(hGroup.getMaxBoundsWidth(), childWidth));

                              var childHeight:Number = unscaledHeight - 10;

                              childHeight = Math.max(hGroup.getMinBoundsHeight(), Math.min(hGroup.getMaxBoundsHeight(), childHeight));

                              // Set the label's position and size

                              hGroup.setLayoutBoundsSize(childWidth, childHeight);

                              hGroup.setLayoutBoundsPosition(3, 5);

                              textLabel.commitStyles();

                    }

          }

}

Here is the code of  the View:

<?xml version="1.0" encoding="utf-8"?>

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

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

                    viewActivate="viewAct()" initialize="view1_initializeHandler(event)">

          <fx:Script>

                    <![CDATA[

                              import components.CustomRenderer;

                              import mx.collections.ArrayList;

                              import mx.events.FlexEvent;

                              [Bindable] private var arrList:ArrayList = new ArrayList();

                              private function viewAct():void

                              {

                                        var factory:ClassFactory = new ClassFactory(CustomRenderer);

                                        myList.itemRenderer = factory;

                              }

                              protected function view1_initializeHandler(event:FlexEvent):void

                              {

                                        // TODO Auto-generated method stub

                                        var obj:Object;

                                        for(var i:Number = 0; i < 10; i++)

                                        {

                                                  obj = new Object();

                                                  obj.TextToDisplay = "hello" + i.toString();

                                                  arrList.addItem(obj);

                                        }

                              }

                    ]]>

          </fx:Script>

          <fx:Declarations>

                    <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>

          <s:layout>

                    <s:VerticalLayout/>

          </s:layout>

          <s:List id="myList" width="100%" height="100%" dataProvider="{arrList}" contentBackgroundColor="white"/>

</s:View>

Can someone help me please?

Thanks in advanced.