滚动时 itemRenderer 在 MX 数据网格的行中发生变化
itemRenderer is getting changed in the rows of a MX datagrid when scrolling
我在使用这个 itemRenderer 时遇到了麻烦。
我有一个 MX DataGrid,我用它来显示我通过 HTTP 服务收集的一些数据。我想在第一列中将一些数据显示为 "preview",然后添加一个带有 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>
我上面与您分享的代码正在生成这个(很好):
所以,我的问题是,当我向下滚动数据网格时,我正在更改预览,如下所示:
唯一改变的是第一列,一切都和滚动前一样。
为什么会这样?
对不起,如果我没有写足够的细节,我认为这就足够了......但是问我是否需要更多细节。
提前致谢!
渲染使用缓冲区,因此您必须 link 直接 属性 及其更改。
试试这个:
Link文本属性到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);
}
告诉我是否可以
我在使用这个 itemRenderer 时遇到了麻烦。 我有一个 MX DataGrid,我用它来显示我通过 HTTP 服务收集的一些数据。我想在第一列中将一些数据显示为 "preview",然后添加一个带有 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>
我上面与您分享的代码正在生成这个(很好):
所以,我的问题是,当我向下滚动数据网格时,我正在更改预览,如下所示:
唯一改变的是第一列,一切都和滚动前一样。
为什么会这样? 对不起,如果我没有写足够的细节,我认为这就足够了......但是问我是否需要更多细节。
提前致谢!
渲染使用缓冲区,因此您必须 link 直接 属性 及其更改。
试试这个:
Link文本属性到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);
}
告诉我是否可以