Se esta querendo aprender ou iniciar novos projetos em Flex, clique aqui

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.

Gostou? Não esqueça de curtir!

Ou compartilhe o link com seus amigos

21 comentários

Deixe uma resposta

  1. Não consigo adicionar o evento:

    DG_Item.addEventListener("editar", editar);
    da erro:
    Não é possível acessar uma propriedade ou um método de uma referência de objeto nula.

     
  2. Ola @Douglas

    O DG_Item existe? A função editar existe?

     
  3. Existe sim, havia colocado no init(), ae dava eferência de objeto nula,

    então coloquei na exibição do meu canvas_dasdos no Tabnavaigator no evento Show, ae deu certo,
    muito obrigado.

     
  4. @Paulo Obrigado pelo Comentário

     
  5. Codigo bastante eficiente me ajudou bastante, muito obrigado.

     
  6. @Eduardo

    Deu certo kra... a questao é o que vc falou mesmo.. o erro que estava dando era baianada, ficou assim:

    abrir.addEventListener(Event.CLOSE, listarEmpresas);

    ae na janela que abre eu faço, dentro do metodo "salvar"

    this.dispatchEvent(new CloseEvent(CloseEvent.CLOSE));

    vlw...obrigado!

     
  7. @Eduardo

    A ideia é boa, porem ainda nao atende. Estou chamando o abrir.addEventListener(CloseEvent.CLOSE, empresasList.getEmpresas()) apos var abrir:IFlexDisplayObject = Editar.abrirPOPUP(dgFiltro.selectedItem);
    porém, o evento só acontece, atualizando o datagrid quando eu clico em "Editar",

    gostaria que atualiza-se, seguindo o exemplo acima, após eu clicar no botão OK do alert, por exemplo, como vc vez do seu exemplo.

     
  8. @Marcelo Veja a seguinte linha do Exemplo:

    var abrir:IFlexDisplayObject = Editar.abrirPOPUP(dgFiltro.selectedItem);

    Esta chama o popUp. Esta linha tem o evento de fechar também.
    abrir.addEventListener(CloseEvent.CLOSE, refreshNoDatagrid)

    implemente o refreshNoDatagrid para recarregar os dados no DataGrid.

     
  9. @Alemao,

    A questao é como fazer isso! Seguindo o exemplo acima, meu metodo "listar" esta dento do main.mxml, certo?. Entao seguindo a logica eu teria que chama-lo após o Fechar() que está em Editar.mxml certo? ou nao? Eu sei que tem que chama-lo, a questao eh como!

     
  10. @Marcelo Simples, chame novamente a função que carrega os dados inicialmente do servidor.

     
  11. galera, passar para uma titlewindow, tabnavegators e tranquilo segue a mesma logica... o que eu tenho duvida eh sobre como atualizar o datagrid apos uma alteracao ou algo parecido!!

     
  12. Para aqueles que queriam passar valores para outras tabs e telas....

    Eu ainda não descobri uma maneira perfeita para fazer isso, mas usei variáveis públicas, tanto para os TabsNavegators quando para as TitleWindows.

    Ou seja

    No evento de escuta, criem instanciem um objeto da tela que vocês querem , depois é só atualizar as variáveis públicas contidas dentro deles, ou usem variáveis estáticas.

    Foi o melhor que consegui por enquanto.

    Parabéns pelo blog

     
  13. @Marcos Não há como editar variáveis de ambiente através do Flex

     
  14. Bom Dia estou aprendendo Flex e achei o seu exemplo fantastico, porém não sei como fazer para atualizar o datagrid com a informação que alterei no pop up, você pode me dizer como faço para do POP UP acessar datagrid ou algum metodo do aplicativo que chamou o popup

     
  15. Como eu poderia popular o grid com as variáveis de ambiente do WIN/LINUX para poderem ser editadas e salvas??? Vc pode dar um caminho???
    Flw.

     
  16. Parabéns pelo blog.

    Aproveitando o  tópico e a idéia da Karol,  vc sabe como eu passo um valor do datagrid, como vc fez neste exemplo, só que para uma nova tela (TitleWindow)? - Abrir uma tela com os dados podendo alterar e como ter uma tela de inclusão também usando um TitleWindow.

    Venho do delphi e estou meio perdido ainda.

    Grato,

    César

     
  17. E como eu faço para que o grid inicial seja atualizado com as alterações feitas no Editar?

    Parabéns pelo blog!

     
  18. Estou com a mesma dúvida... alguem pode me ajudar??

     
  19. só um comentário que vc pode obter o mesmo resultado executando: Editar.abrirPOPUP(dgFiltro.selectedItem);
    direto no click to botão.

    Assim vc elimina um evento adicional.

    Grande blog btw.
    julio

     
  20. Parabéns pelo blog.

    Aproveitando esse tópico, vc sabe como eu passo um valor do datagrid, como vc fez neste exemplo, só que para uma tab? Tipo, dou um duplo click no registro no datagri e é aberto uma tab passando este parametro.

    No caso estou usando a lib SuperTabNavigator.

    Grata

    Karol