当向上滚动时，Flex DataGrid行颜色展开 [英] Flex DataGrid row color spreads when scrolled up down
本文介绍了当向上滚动时，Flex DataGrid行颜色展开的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在考虑发生这种情况，因为ItemRenderers被回收。 p>
这是我的代码：
<？xml version =1.0 encoding =utf-8？>
< mx：Application xmlns：mx =http://www.adobe.com/2006/mxmllayout =verticalminWidth =955minHeight =600
>
< mx：脚本>
<！[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（）;
}
私有函数setFilterWordInRenderer（）：void
{
if（！rendererFactory）
rendererFactory = new ClassFactory（CustomItemRenderer）
trace（Reached setFilterWordInRenderer）;
col1.itemRenderer = rendererFactory;
col2.itemRenderer = rendererFactory;
}
]]>
< / mx：脚本>
< mx：Button id =btnlabel =突出显示click =btn_clickHandler（event）/>
< mx：DataGrid id =dtgwidth =378height =496>
< mx：dataProvider>
< mx：XMLList id =datXMLxmlns =>
< 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 =col1headerText =Col1dataField =@ id/>
< mx：DataGridColumn id =col2headerText =Col2dataField =*/>
< / mx：columns>
< / mx：DataGrid>
< / mx：Application>
CustomItemRenderer.mxml
<？xml version =1.0encoding =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;
}
覆盖公共函数集数据（value：Object）：void
{
if（！value）
return;
super.data = value;
//使用listdata和datafield设置标签文本，使项目渲染器尽可能的通用。
if（this.myLabel == null）
this.myLabel = new Label（）;
this.myLabel.text = data [DataGridListData（listData）.dataField];
this.addChild（this.myLabel）;
}
覆盖受保护的函数updateDisplayList（unscaledWidth：Number，unscaledHeight：Number）：void {
super.updateDisplayList（unscaledWidth，unscaledHeight）;
var g：Graphics = graphics;
g.clear（）;
var object：Object = _listData;
if（object.rowIndex == 0）{//或者你的条件是
g.beginFill（0xFFFFC0）;
g.drawRect（0，0，unscaledWidth，unscaledHeight）;
g.endFill（）;
}
}
]]>
< / mx：脚本>
< / mx：HBox>
首次加载数据时，以下快照是正确的：
但是当我滚动DataGrid时，下面的颜色被应用于任何随机行：
解决方案
我发现一个解决方案，在某种情况下，我可以将行颜色的值设置为黄色，或者保持交替的默认行颜色模式。
有人可能会发现这个解决方案很有用：
<？xml version =1.0encoding =utf-8？>
< mx：Application xmlns：mx =http://www.adobe.com/2006/mxmllayout =verticalminWidth =955minHeight =600
>
< mx：脚本>
<！[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（）;
}
私有函数setFilterWordInRenderer（）：void
{
if（！rendererFactory）
rendererFactory = new ClassFactory（CustomItemRenderer）
trace（Reached setFilterWordInRenderer）;
//渲染器的数据。要检查的字。
//rendererFactory.properties = {filterWord：textInput.text};
//只将渲染器设置为要完成此突出显示的列。
col1.itemRenderer = rendererFactory;
col2.itemRenderer = rendererFactory;
}
]]>
< / mx：脚本>
< mx：Button id =btnlabel =突出显示click =btn_clickHandler（event）/>
< mx：DataGrid id =dtgwidth =378height =496>
< mx：dataProvider>
< mx：XMLList id =datXMLxmlns =>
< 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 =col1headerText =Col1dataField =@ id/>
< mx：DataGridColumn id =col2headerText =Col2dataField =*/>
< / mx：columns>
< / mx：DataGrid>
< / mx：Application>
;？xml version =1.0encoding =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;
//默认交替颜色的数据网格。
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;
}
覆盖公共函数集数据（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：脚本>
< mx：Label text ={myLabelString}/>
< / mx：HBox>
I'm facing issue with datagrid row background color being spread when datagrid is vertically scrolled.
I'm assuming this is happening because ItemRenderers are recycled.
Here's my 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:
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行颜色展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
