apache-flex - 试图获取数据网格 selecteditem 的全局 y 坐标

Question

这是情况:
我有一个填充的数据网格，我想将一个表单移动到与数据网格的 selectedItem 内联(相同的 y 位置)。我不能依赖 mouseClick 事件，因为选定的项目可能会随着键盘事件而改变。数据网格没有 itemRenderer，只有普通的旧数据字段。
以前有人做过这个吗？

这里有一些基于雅各布的回答感兴趣的人的一些示例代码。

<?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" 
               minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.events.ListEvent;
            import mx.formatters.DateFormatter;

            [Bindable] public var ac_POitems:ArrayCollection = new ArrayCollection();
            [Bindable] public var selectedY:int;

            protected function dg_POitems_creationCompleteHandler(event:FlexEvent):void
            {
                //TODO
            }

            protected function submit_clickHandler(event:MouseEvent):void
            {
                //TODO
            }

            protected function format_sqlite_date(item:Object, col:DataGridColumn):String
            {
                var df:DateFormatter = new DateFormatter();
                df.formatString = "MM/DD/YYYY";
                var value:Object = item[col.dataField];
                return df.format(value);
            }

            protected function dg_POitems_changeHandler(event:ListEvent):void
            {
                trace(event.itemRenderer.y);
                selectedY = event.itemRenderer.y;
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <mx:VBox width="100%" height="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
        <mx:DataGrid id="dg_POitems" dataProvider="{ac_POitems}" creationComplete="dg_POitems_creationCompleteHandler(event)" 
                     editable="true" height="100%" change="dg_POitems_changeHandler(event)">
            <mx:columns>
                <mx:DataGridColumn headerText="Consumer" dataField="consumer" editable="false"/>
                <mx:DataGridColumn headerText="Description" dataField="description" width="300" editable="false"/>
                <mx:DataGridColumn headerText="Amount" dataField="item_cost" editable="false" width="55"/>
                <mx:DataGridColumn headerText="Service Date" dataField="service_date" labelFunction="format_sqlite_date"/>
                <mx:DataGridColumn headerText="Invoice Date" dataField="invoice_date" labelFunction="format_sqlite_date"/>
                <mx:DataGridColumn headerText="Paid Date" dataField="payment_received" labelFunction="format_sqlite_date"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>
    <mx:Form id="form_POItemDateEditor" label="{dg_POitems.selectedItem.consumer}" x="{dg_POitems.x + dg_POitems.width + 10}" 
             y="{selectedY + 10}" visible="{dg_POitems.selectedItem}" borderColor="#ffffff">
        <s:Label text="edit {dg_POitems.selectedItem.consumer}" width="100%" textAlign="center" verticalAlign="middle" fontWeight="bold" textDecoration="underline"/>
        <mx:FormItem label="Service Date">
            <mx:DateField id="service_date"/>
        </mx:FormItem>
        <mx:FormItem label="Invoie Date">
            <mx:DateField id="invoice_date"/>
        </mx:FormItem>
        <mx:FormItem label="Paid Date">
            <mx:DateField id="payment_received"/>
        </mx:FormItem>
        <mx:FormItem>
            <s:Button id="submit" label="Submit" click="submit_clickHandler(event)"/>
        </mx:FormItem>
    </mx:Form>
</s:Application>

Answer 1

这应该可以帮助您入门:

<fx:Script>
    <![CDATA[
        import mx.events.ListEvent;
        protected function datagrid1_changeHandler(event:ListEvent):void
        {
            trace(event.itemRenderer.y);

        }

    ]]>
</fx:Script>

<mx:DataGrid dataProvider="{steps}" change="datagrid1_changeHandler(event)" >
    ....

编辑 正在显示 spark:List 的监听器 valueCommit事件。

protected function valueCommitHandler(event:FlexEvent):void
    {
        trace(event.currentTarget.layout.getElementBounds(list.selectedIndex));
    }