Question

情况如下：
我有一个填充的数据网格，我想使用datagrid的selectedItem将一个表单移动到内联（相同的y位置）。我不能依赖mouseClick事件，因为所选项目可能会随键盘事件而改变。 datagrid没有itemRenderer，只有普通的旧dataField 有人这么做过吗？

以下是基于雅各布答案的所有感兴趣的人的示例代码。

<?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));
    }

Answer 2

查看DisplayObject's localToGlobal功能。它允许您将ItemRenderer的'y'位置（相对于父容器，可能是List）转换为全局'y'位置（相对于舞台）。

globalToLocal会做相反的事情。

你必须从这里开始做一些额外的计算，但这些将取决于你的应用程序显示层次结构的样子，所以我不能比这更具体。

Answer 3

您可以在此处找到您想要完成的完整代码http://flexdiary.blogspot.com/2009/11/flex-template-component.html

试图获取datagrid的全局y坐标

3 个答案: