1

I have a DataGrid with the first column being strings ("Red", "Blue", etc) and the second column being a circle (custom UIComponent) of the corresponding color. If I click on the first column to sort, all the names of the colors are sorted fine but those circles in the second column are in totally wrong order. Anyone knows what went wrong with the code below?

This is the application mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:components="components.*"
               minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var myArray:ArrayCollection = new ArrayCollection([
                { name:"Red",    color:0xff0000 },
                { name:"Orange", color:0xff8000 },
                { name:"Yellow", color:0xffff00 },
                { name:"Green",  color:0x00ff00 },
                { name:"Blue",   color:0x0000ff },
                { name:"Purple", color:0xff00ff }
            ]);
        ]]>
    </fx:Script>

    <s:DataGrid dataProvider="{myArray}">
        <s:columns>
            <s:ArrayCollection>
                <s:GridColumn dataField="name"/>
                <s:GridColumn dataField="color">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:VGroup>
                                    <components:Circle color="{data.color}" />
                                </s:VGroup>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
            </s:ArrayCollection>
        </s:columns>
    </s:DataGrid>
</s:Application>

And this is the custom UIComponent:

package components
{
    import mx.core.UIComponent;

    public class Circle extends UIComponent
    {
        public var color:uint;

        public function Circle()
        {
            super();
            height = 20;
            width = 20;
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledWidth);
            graphics.clear();
            graphics.beginFill(color, 1);
            graphics.drawCircle(10, 10, 8);
            graphics.endFill();
        }
    }
}
4

1 回答 1

0

您的自定义组件可能根本没有重绘。最简单的解决方案是根本不使用自定义组件，而是使用 FXG 图形来绘制圆圈。

用这个替换你的 itemrenderer，它应该可以正常工作：

<s:GridItemRenderer>
     <s:Ellipse width="20" height="20">
         <s:fill>
              <s:SolidColor color="{data.color}" />
         </s:fill>
     </s:Ellipse>
</s:GridItemRenderer>

也就是说，我会将标签和颜色样本放在一列（而不是两列）中，因为它们代表相同的数据。

于 2012-10-13T08:52:37.167 回答