Question

当数据网格垂直滚动时，我面临着数据网格行背景颜色被传播的问题。

我假设发生了这种情况，因为ItemRenderers被回收了。

这是我的代码：

<?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>

首次加载数据时，以下快照是正确的：

enter image description here

但是当我滚动浏览DataGrid时，以下颜色适用于任何随机行： enter image description here

Answer 1

你是对的。这里的问题是itemRenderer回收问题。这里_listData实例数据与当前可见的项目匹配，因此在滚动时由于Recyle ItemRenderer而变为rowIndex = 0。

您可以通过两种方式解决问题。

1）基于数据（更好地基于价值的亮点）

if (data.@rowNo == "0") { //or rely on data ANOTHER WAY
    g.beginFill(0xFFFFC0); 
    g.drawRect(0, 0, unscaledWidth, unscaledHeight);
    g.endFill(); 
}

但是XML Structure需要添加rowNo属性，如下所示

<value id='test1' rowNo="0">abc</value>
<value id='test2' rowNo="1">sadad</value>
<value id='23' rowNo="2">ytuyt</value>

2）基于索引（仅针对基于索引的突出显示更好）

获取网格数据提供者。数据setter方法中的gridDataProvider = XMLListCollection((owner as DataGrid).dataProvider);。

if (gridDataProvider.getItemIndex(data) == 0) {    
    g.beginFill(0xFFFFC0); 
    g.drawRect(0, 0, unscaledWidth, unscaledHeight);
    g.endFill(); 
}

下面的代码有足够的清晰度（ 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.XMLListCollection;
            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;

            [Bindable]
            private var gridDataProvider:XMLListCollection;

            public function get listData() : BaseListData
            {
                return _listData;
            }
            public function set listData( value:BaseListData ) : void
            {
                _listData = value;
            }

            override protected function createChildren():void
            {
                super.createChildren();

                this.myLabel = new Label();

                this.addChild(this.myLabel);
            }

            override public function set data(value:Object):void 
            {
                super.data = value;

                if(!value)
                    return;

                //Set the label text,using listdata and datafield to make the item renderer as generic as possible.

                this.myLabel.text = data[DataGridListData(listData).dataField];

                gridDataProvider = XMLListCollection((owner as DataGrid).dataProvider);

                this.invalidateDisplayList();
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
            { 
                super.updateDisplayList(unscaledWidth, unscaledHeight); 

                var g:Graphics = graphics;
                g.clear();

                if (gridDataProvider.getItemIndex(data) == 0) { //or rely on data 
//              if (data.@rowNo == "0") { //or rely on data 
                    g.beginFill(0xFFFFC0); 
                    g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                    g.endFill(); 
                }
            } 
        ]]>
    </mx:Script>
</mx:HBox>

最佳实践：所有组件创建都转到createChildren()而不是数据设置器方法。

Answer 2

我找到了一个解决方案，在某种情况下，我可以将行颜色的值设置为黄色，或者保持交替的默认行颜色模式。

有人可能会发现此解决方案很有用：

<?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行颜色会展开

2 个答案: