Eventos em DataGrid

Bha, esta noite estou inspirado. Então aqui vai mais um exemplo de como utilizar eventos dentro de itemRenderer de um DataGrid.

No exemplo coloquei um botão de editar dentro de uma coluna do DataGrid, e quando clicar, preciso que abra um PopUp para edição dos dados.

Arquivo main.mxml
<mx:DataGrid id="dgFiltro" dataProvider="{XMLdatagrid}" left="10" right="10" top="10" bottom="10">
    <mx:columns>
        <mx:DataGridColumn width="70" editable="false">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox horizontalAlign="center">
                        <mx:Button height="100%" label="Editar"
                                   click="dispatchEvent(new Event('editar', true))" />
                    </mx:HBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="Nome" dataField="name" />
        <mx:DataGridColumn headerText="Telefone" dataField="phone" />
        <mx:DataGridColumn headerText="E-mail" dataField="email" />
    </mx:columns>
</mx:DataGrid>

Veja acima que ao clicar no botão editar dentro do itemRenderer, é dispachado um evento. Com um evento sendo disparado, preciso de um que este seja escutado, então no creationComplete é iniciado a escuta do evento.

Arquivo main.mxml
private function init():void
{
    dgFiltro.addEventListener("editar", editar);
}

Posso adicionar quantos eventos for necessário ao DataGrid.

Ao ser dispachado o Evento é enviado para a função editar(e:Event) que abre o PopUp.

Arquivo main.mxml
public function editar(e:Event):void
{
    var abrir:IFlexDisplayObject = Editar.abrirPOPUP(dgFiltro.selectedItem);
}

Agora é se divertir com o Fonte.

Fique por dentro de nossas novidades, ideias e atualizações