数据网格中的 Itemclick 事件

Question

该问题可以概括为当单击数据网格中的项目时，文本区域显示该项目的值，但这里的组件是独立的，因此需要调度事件。

My mxml component file :

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml" itemClick="itemClickEvent(event);"  creationComplete="init()">

<mx:Metadata>
  [Event(name="IdSelected", type="one.IdEvent")]
</mx:Metadata>

<mx:Script>
<![CDATA[     import genericReport.*;
              import crewUtilization.*;
              import utils.*;
              import studies.*;
              import mx.rpc.events.FaultEvent;
              import mx.rpc.events.ResultEvent;
              import mx.controls.Alert;
              import mx.events.ListEvent;


      private function itemClickEvent(event:ListEvent):void 
      {
          var _study:Object=event.currentTarget.selectedItem.study;
          dispatchEvent(new IDEvent(_ID));     
      }


]]>

</mx:Script>

<mx:columns>

 <mx:DataGridColumn dataField="name" />
 <mx:DataGridColumn dataField="userId" />
</mx:columns>
</mx:DataGrid>

/////////////////////////////////////////////////////////// /////////////

这是我的主 MXML 应用程序文件：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="*">
<mx:TitleWindow label="Scenario Creation" xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:ns1="ccCreation.*">

<mx:Label text="CC CREATION" width="100%" />
<mx:VBox width="100 %" styleName="scenariovboxStyle">

<custom:studySelector id="dg" />
</mx:VBox>
</mx:TitleWindow>   
</mx:Application>

Answer 1

我认为studyId引用dataGrid可能比dataGrid引用studyId更好。 您可以将其添加到您的主 mxml 中：

<mx:TextArea id="studyId" text="{dataGrid.selectedItem.Study}"/>

这应该可以工作，因为 TextArea.text 将响应 DataGrid.selectedItem 的属性更改事件，因此只要选择更改，它就会更改。

编辑：调度事件：

您可以从代码中的任何位置调度事件，并且侦听器将能够侦听该事件。 例如：

<mypackage:MyComponent>
...
private function foo():void
{
    dispatchEvent(new MouseEvent(MouseEvent.CLICK)); // Dispatches a mouse event whenever foo is called.
}

现在您可以收听该事件：

<mypackage:MyComponent id="myComponent"/>
...
myComponent.addEventListener(MouseEvent.CLICK, mouseClickHandler);

private function mouseClickHandler(event:MouseEvent):void
{
    ... // code to handle that event here.
}

希望这有帮助！

<mx:MainComponent creationComplete="init()" ...>
    ...
    private function init(event:Event):void
    {
        ...
        customComponent.addEventListener(StudyEvent.STUDYSELECTED, studySelectedListener);
        ...
    }

    private function studySelectedListener(event:StudyEvent):void
    {
        studyid.text = event.study.studyId; // or wherever you store your studyId value
        ...
    }
    ...
<mx:MainComponent/>

发生的情况是，每当您的customComponent 触发StudyEvent.STUDYSELECTED 事件时，您的主函数都会捕获该事件，并调用studySelectedListener。