当向上滚动时,Flex DataGrid行颜色展开 [英] Flex DataGrid row color spreads when scrolled up down
问题描述
我正在考虑发生这种情况,因为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屋!