文章/答案/技术大牛

发布

社区首页 >问答首页 >向下滚动时，柔性DataGrid行颜色扩展

问向下滚动时，柔性DataGrid行颜色扩展
EN

Stack Overflow用户

提问于 2014-03-10 18:30:43

回答 2查看 837关注 0票数 1

我面临的问题与数据行背景颜色是传播时，数据是垂直滚动。

我认为这是因为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>

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

但是，当我在DataGrid中滚动时，对任意随机行都会应用下面的颜色：

actionscript-3

flash

apache-flex

datagrid

flex3

回答 2

Stack Overflow用户

发布于 2014-03-11 07:05:04

你是正确的。这里的问题是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结构需要添加rowNo属性如下所示

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

2)基于索引(仅适用于基于索引的突出显示)

以获取网格数据提供程序。数据设置器方法中的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()，而不是data方法。

票数 0

Stack Overflow用户

发布于 2014-03-11 07:15:58

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

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22308385

复制

相似问题

问向下滚动时，柔性DataGrid行颜色扩展
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向下滚动时，柔性DataGrid行颜色扩展EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向下滚动时，柔性DataGrid行颜色扩展
EN