滚动时，MX 数据网格的行中的 itemRenderer 正在发生变化

Question

我在使用这个 itemRenderer 时遇到了麻烦。 我有一个 MX DataGrid，我用它来显示我通过 HTTP 服务收集的一些数据。我想在第一列中将一些数据显示为“预览”，并添加了一个带有 DataGridColum.itemRenderer 属性的 itemRenderer。这里一切正常。

<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>

这是我的 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>

我在上面与您分享的代码正在生成这个（这很好）：

所以，我的问题是，当我向下滚动数据网格时，我正在更改预览，如下所示：

唯一改变的值是第一列，一切都和滚动前一样。

为什么会这样？ 对不起，如果我没有写足够的细节，我认为这已经足够了......但如果需要更多细节，请询问我。

提前致谢！

Answer 1

渲染使用缓冲区，因此您必须直接链接您的属性及其更改。

试试这个：

将文本属性链接到fixLines方法，如下

在<s:RichEditableText> 中放入属性text 这个：

text = "{fixLines(data)}"

改变你的方法如下：

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;
}

在调用 fixLines 的 init 方法中，更改如下：

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

告诉我是否可以