4

数列のデータを表示するDataGridコンポーネントがあります。これには、ユーザーがレコードに関してアクションを実行できるボタンを表示する追加の列が1つあります。

<mx:DataGrid dataProvider="{myData}">
    <mx:columns>
        <mx:DataGridColumn dataField="firstName" headerText="First Name" 
            width="75" />

        <mx:DataGridColumn dataField="LastName" headerText=" Last Name" 
            width="150" />

        <mx:DataGridColumn dataField="phone" headerText="Phone" 
            width="120" />

        <mx:DataGridColumn headerText="" width="110">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Box horizontalAlign="center" width="100%">
                        <mx:Button label="Take Action" />
                    </mx:Box>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

親コンポーネントで利用可能な他のデータを使用してアクションを実行する必要がありますが、DataGridのデータとは関係ありません。

親コンポーネントでボタンのクリックをキャッチし、それがどのレコードに対応するかを知るための最良の方法は何ですか？

カスタムイベント、itemEditor、またはその他のものを完全に使用する必要がありますか？

4

2 に答える 2

2

itemRendererをクラスにしてから、ここで説明するメソッドを使用して、そのクラス内からDataGridを参照する必要があります。次に、DataGridからイベントをディスパッチできます。これは、DataGridを保持するコンテナーで簡単にリッスンできます。あなたがしたくないことは、バブリングに頼るか、itemRendererを直接聴こうとすることです。イベントリスナーがこの情報にすばやくアクセスできるように、DataGrid行のデータプロパティを保持するカスタムイベントを作成することをお勧めします。

于 2009-07-08T17:04:35.100 に答える
1

Joelに感謝します。これが、その記事（以前に読んだことがある）を読んだ後に思いついた最終的な解決策です。ボタンがクリックされたアイテムを別のアイテムのプロパティである配列に追加したいので、「他のアイテム」をプロパティとしてDataGridコンポーネントに渡し、itemRendererからの関数呼び出しでそれに対してアクションを実行します。

/* CustomDataGrid.mxml */
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            public var otherData:Object;

            public function takeAction(item:Object):void
            {
                otherData["children"][0] = item;
            }
        ]]>
    </mx:Script>

    <mx:columns>
        <mx:DataGridColumn dataField="firstName" headerText="First Name" 
            width="75" />

        <mx:DataGridColumn dataField="LastName" headerText=" Last Name" 
            width="150" />

        <mx:DataGridColumn dataField="phone" headerText="Phone" 
            width="120" />

        <mx:DataGridColumn headerText="" width="110" 
            itemRender="ActionButtonItemRenderer" />
    </mx:columns>
</mx:DataGrid>

/* ActionButtonItemRenderer.as */
package
{
    import flash.events.MouseEvent;

    import mx.controls.Button;

    public class ActionButtonItemRenderer extends Button
    {
        public function ActionButtonItemRenderer()
        {
            super();

            label = "Take Action";
        }

        override protected function clickHandler(event:MouseEvent):void
        {
            super.clickHandler(event);

            var owner:CustomDataGrid = listData.owner as CustomDataGrid;

            owner.takeAction(data);
        }
    }
}
于 2009-07-08T17:56:47.477 に答える