1

最初の列が文字列（「赤」、「青」など）で、2番目の列が対応する色の円（カスタムUIComponent）であるDataGridがあります。最初の列をクリックして並べ替えると、すべての色の名前が正しく並べ替えられますが、2番目の列の円の順序は完全に間違っています。以下のコードで何がうまくいかなかったのか誰か知っていますか？

これはアプリケーションの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>

そしてこれはカスタム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>

とはいえ、ラベルとカラー サンプルは同じデータを表すため、(2 列ではなく) 1 列に配置します。

于 2012-10-13T08:52:37.167 に答える