Flex的DataGrid行颜色s- $ P $垫时向上滚动向下 [英] Flex DataGrid row color spreads when scrolled up down
本文介绍了Flex的DataGrid行颜色s- $ P $垫时向上滚动向下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我现在面临的问题与DataGrid行背景色为S. $ P $钮时，数据网格垂直滚动。
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.
下面是我的code：
<?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行颜色s- $ P $垫时向上滚动向下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
