本文介绍了向下滚动时，Flex DataGrid 行颜色会扩散的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当数据网格垂直滚动时，我面临数据网格行背景颜色传播的问题.
I'm facing issue with datagrid row background color being spread when datagrid is vertically scrolled.
我假设这是因为 ItemRenderer 被回收了.
I'm assuming this is happening because ItemRenderers are recycled.
这是我的代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600"
>
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var rendererFactory:ClassFactory;
protected function btn_clickHandler(event:MouseEvent):void
{
setFilterWordInRenderer();
}
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
setFilterWordInRenderer();
}
private function setFilterWordInRenderer():void
{
if(!rendererFactory)
rendererFactory = new ClassFactory(CustomItemRenderer)
trace("Reached setFilterWordInRenderer");
col1.itemRenderer = rendererFactory;
col2.itemRenderer = rendererFactory;
}
]]>
</mx:Script>
<mx:Button id="btn" label="Highlight" click="btn_clickHandler(event)"/>
<mx:DataGrid id="dtg" width="378" height="496">
<mx:dataProvider>
<mx:XMLList id="datXML" xmlns="">
<value id='test1'>abc</value>
<value id='test2'>sadad</value>
<value id='23'>ytuyt</value>
<value id='24'>uytuty</value>
<value id='62'>erewewwer</value>
<value id='72'>tefcvsrwert</value>
<value id='28'>uiiyui</value>
<value id='82'>tryry</value>
<value id='28'>iouoo</value>
<value id='test1'>abc</value>
<value id='test2'>sadad</value>
<value id='23'>ytuyt</value>
<value id='24'>uytuty</value>
<value id='62'>erewewwer</value>
<value id='72'>tefcvsrwert</value>
<value id='28'>uiiyui</value>
<value id='82'>tryry</value>
<value id='28'>iouoo</value>
<value id='test1'>abc</value>
<value id='test2'>sadad</value>
<value id='23'>ytuyt</value>
<value id='24'>uytuty</value>
<value id='62'>erewewwer</value>
<value id='72'>tefcvsrwert</value>
<value id='28'>uiiyui</value>
<value id='82'>tryry</value>
<value id='28'>iouoo</value>
<value id='test1'>abc</value>
<value id='test2'>sadad</value>
<value id='23'>ytuyt</value>
<value id='24'>uytuty</value>
<value id='62'>erewewwer</value>
<value id='72'>tefcvsrwert</value>
<value id='28'>uiiyui</value>
<value id='82'>tryry</value>
<value id='28'>iouoo</value>
</mx:XMLList>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn id="col1" headerText="Col1" dataField="@id"/>
<mx:DataGridColumn id="col2" headerText="Col2" dataField="*"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
CustomItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IDropInListItemRenderer"
>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
import mx.controls.Label;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
private var myLabel:Label;
[Bindable]
private var _listData:BaseListData;
public function get listData() : BaseListData
{
return _listData;
}
public function set listData( value:BaseListData ) : void
{
_listData = value;
}
override public function set data(value:Object):void
{
if(!value)
return;
super.data = value;
//Set the label text,using listdata and datafield to make the item renderer as generic as possible.
if(this.myLabel == null)
this.myLabel = new Label();
this.myLabel.text = data[DataGridListData(listData).dataField];
this.addChild(this.myLabel);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
var g:Graphics = graphics;
g.clear();
var object:Object = _listData;
if (object.rowIndex == 0) { //or whatever your conditions are
g.beginFill(0xFFFFC0);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
}
}
]]>
</mx:Script>
</mx:HBox>
第一次加载数据时，下面的快照是正确的:
The below snapshot is correct when data is loaded for first time:
但是当我滚动 DataGrid 时，以下颜色应用于任何随机行:
But when I scroll through DataGrid, the below color is applied for any random rows :
推荐答案
我找到了一个解决方案，在某些情况下，我可以将行颜色的值设置为黄色，或者保留交替的默认行颜色模式是.
I found a solution where in, on some condition, i can set the value of row color to yellow, or else keep the alternating default row color pattern as it is.
有人可能会发现此解决方案很有用:
Someone may find this solution useful :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600"
>
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var rendererFactory:ClassFactory;
protected function btn_clickHandler(event:MouseEvent):void
{
setFilterWordInRenderer();
}
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
setFilterWordInRenderer();
}
private function setFilterWordInRenderer():void
{
if(!rendererFactory)
rendererFactory = new ClassFactory(CustomItemRenderer)
trace("Reached setFilterWordInRenderer");
//Data for the renderer.The word to check.
//rendererFactory.properties = {filterWord:textInput.text};
//Only set the renderers to the columns where you want this highlighting to be done.
col1.itemRenderer = rendererFactory;
col2.itemRenderer = rendererFactory;
}
]]>
</mx:Script>
<mx:Button id="btn" label="Highlight" click="btn_clickHandler(event)"/>
<mx:DataGrid id="dtg" width="378" height="496" >
<mx:dataProvider>
<mx:XMLList id="datXML" xmlns="">
<value id='test1'>abc</value>
<value id='test2'>sadad</value>
<value id='23'>ytuyt</value>
<value id='24'>uytuty</value>
<value id='62'>erewewwer</value>
<value id='72'>tefcvsrwert</value>
<value id='28'>uiiyui</value>
<value id='82'>tryry</value>
<value id='28'>iouoo</value>
<value id='test1'>abc</value>
<value id='test2'>sadad</value>
<value id='23'>ytuyt</value>
<value id='24'>uytuty</value>
<value id='62'>erewewwer</value>
<value id='72'>tefcvsrwert</value>
<value id='28'>uiiyui</value>
<value id='82'>tryry</value>
<value id='28'>iouoo</value>
<value id='test1'>abc</value>
<value id='test2'>sadad</value>
<value id='23'>ytuyt</value>
<value id='24'>uytuty</value>
<value id='62'>erewewwer</value>
<value id='72'>tefcvsrwert</value>
<value id='28'>uiiyui</value>
<value id='82'>tryry</value>
<value id='28'>iouoo</value>
<value id='test1'>abc</value>
<value id='test2'>sadad</value>
<value id='23'>ytuyt</value>
<value id='24'>uytuty</value>
<value id='62'>erewewwer</value>
<value id='72'>tefcvsrwert</value>
<value id='28'>uiiyui</value>
<value id='82'>tryry</value>
<value id='28'>iouoo</value>
</mx:XMLList>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn id="col1" headerText="Col1" dataField="@id"/>
<mx:DataGridColumn id="col2" headerText="Col2" dataField="*"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IDropInListItemRenderer"
>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.AdvancedDataGrid;
import mx.controls.DataGrid;
import mx.controls.Label;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
[Bindable]
private var myLabelString:String;
private var grid:DataGrid;
//default alternating colors of data grid.
private var alternatingColors:Array = [0xF7F7F7, 0xFFFFFF];
[Bindable]
private var _listData:BaseListData;
public function get listData() : BaseListData
{
return _listData;
}
public function set listData( value:BaseListData ) : void
{
_listData = value;
}
override public function set data(value:Object):void
{
if(!value)
return;
super.data = value;
myLabelString = data[DataGridListData(listData).dataField];
if(data == "abc")
{
setStyle("backgroundColor", 0xFFFFC0);
setStyle("backgroundAlpha", 1.0);
}
else
{
setStyle("backgroundAlpha", 0.0);
}
}
]]>
</mx:Script>
<mx:Label text="{myLabelString}"/>
</mx:HBox>
这篇关于向下滚动时，Flex DataGrid 行颜色会扩散的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！