itemRenderer is getting changed in the rows of a MX datagrid when scrolling

I am having a bad time with this itemRenderer. I have an MX DataGrid that I am using to show some data I am collecting with an HTTP service. I wanted to show some data as a "preview" in the first column and I adding an itemRenderer with DataGridColum.itemRenderer property. Everything here works fine.

<mx:DataGrid id="labelsGrid" width="100%" height="100%" visible="false" 
 variableRowHeight="true" sortableColumns="false">
    <mx:columns>
        <mx:DataGridColumn headerText="Preview" dataField="recordid"
         width="{ preview_column_width }" itemRenderer="us.lbs.itemRenderers.preview"/>

        <mx:DataGridColumn headerText="Design id" dataField="label_id" />

        <mx:DataGridColumn headerText="Font size" dataField="label_minheight"/>

        <mx:DataGridColumn headerText="Width" dataField="label_width"/>

        <mx:DataGridColumn headerText="Height" dataField="label_height"/>

        <mx:DataGridColumn headerText="Label P/N" dataField="label_pn"/> 

        <mx:DataGridColumn headerText="Font type" dataField="label_fonttype"/>

        <mx:DataGridColumn headerText="Qty" dataField="label_qty"/>
    </mx:columns>
</mx:DataGrid>

and here is my code for the itemRenderer

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx"
     width="100%" height="100%"
     horizontalAlign="center" verticalAlign="middle" creationComplete="init( )">
<fx:Style> 
    @namespace mx "library://ns.adobe.com/flex/mx";
    @namespace s "library://ns.adobe.com/flex/spark";
</fx:Style>
<fx:Script>
    <![CDATA[
        import aw.utils.StringUtils;

        import flashx.textLayout.edit.SelectionFormat;
        import flashx.textLayout.formats.TextLayoutFormat;

        import mx.binding.utils.BindingUtils;
        import mx.binding.utils.ChangeWatcher;
        import mx.controls.Alert;
        import mx.events.CloseEvent;
        import mx.events.FlexEvent;
        import mx.events.ModuleEvent;
        import mx.geom.RoundedRectangle;
        import mx.managers.PopUpManager;
        import mx.messaging.messages.IMessage;
        import mx.rpc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;
        import mx.utils.ColorUtil;
        import mx.utils.ObjectUtil;
        import mx.utils.StringUtil;

        import spark.components.Application;

        import us.lbs.viewer;

                  public var dad:viewer = null;
                  public var zoom:int = 2;

                  public var px_in:Number = 96;
                  public var pt_px:Number = 1.333333333333333;

        [Bindable]public var var_width:Number = 0;
        [Bindable]public var var_height:Number = 0;
        [Bindable]public var var_font_size:Number = 12;
        [Bindable]public var tmp_lines:String = "";

        public function init( ):void {
            settingDad( ); setSize( ); setFontSize( ); fixLines( );
        }

        protected function settingDad():void {
            dad = this.parentDocument as viewer;
            if ( typeof( dad.previewers[ data.label_id ] ) != 'object' ) {
                dad.previewers[ data.label_id ] = {};
                dad.previewers[ data.label_id ].preview = this;

                /*Alert.show( 
                    this.data.label_id + "\n" + 
                    "Type: " + typeof( dad.previewers[ data.label_id ].preview ), 
                    this.data.rm_pn
                );*/
            }
        }

        protected function setFontSize( ):void {
            var_font_size = data.label_minheight * pt_px * zoom;
            var_font_size = Math.round( var_font_size );
        }

        protected function setSize( ):void {
            var_width  = Number( data.label_width ) * px_in * zoom;
            var_height = Number( data.label_height ) * px_in * zoom;

            dad.labelsGrid.visible = true;
            dad.preview_column_width = ( var_width > dad.preview_column_width ) ? var_width:dad.preview_column_width;
        }

        protected function fixLines( ):void {
            tmp_lines = ""; var lines:Array = String( data.lines ).split( "//" );
            for each ( var line:String in lines ) {
                tmp_lines += StringUtils.trim( line ) + "\n";
            } tmp_lines = StringUtils.trim( tmp_lines );
        }

    ]]>
</fx:Script>
<s:HGroup >
    <s:RichEditableText
        id="previewTxt" 
        backgroundColor="white"
        text="{ tmp_lines }" 
        selectionHighlighting="always" editable="false" selectable="true"
        width="{ var_width }" height="{ var_height }" 
        kerning="on"
        fontSize="{ var_font_size }" fontFamily="{ data.label_fonttype }"
        paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0"
        textAlign="center" verticalAlign="middle" focusedTextSelectionColor="0xA8C6EE"
        selectionChange="dad.previewTxtSelectionChange(event)" />   
</s:HGroup>

The code I shared with you above is generating this ( which is good ):

So, my issue here is that when I scroll down the datagrid, I am getting the Previews changed, like this:

The only value that has changed is the first column, everything is like it was before scrolling.

Why is happening this? Sorry if I haven't written enough details, I think this is enough... but ask me if more details are needed.

Thanks in advance!

Renderization uses a buffer, so you must link directly your property and its change.

Try this:

Link text property to fixLines method, as follow

in <s:RichEditableText> put in the property text this:

text = "{fixLines(data)}"

Change your method as follow:

protected function fixLines(obj:Object):String {
    if (obj == null) return "";
    var currText = "";
    var lines:Array = String( obj.lines).split( "//" );
    for each ( var line:String in lines ) {
        currText += StringUtils.trim( line ) + "\n";
    }
    currText = StringUtils.trim( tmp_lines );
    return currText;
}

In your init method, where you call fixLines, change as follow:

public function init( ):void {
    settingDad( ); setSize( ); setFontSize( ); fixLines(data);
}

Tell me if it's OK