Flex – Obtendo dados de um DataGrid

Neste post irei ensinar como obter dados de uma linha de um DataGrid de uma maneira bem simples e direta.

Criando a aplicação

Crie uma nova aplicação: File –> New –> MXML application e escolha um nome de sua preferência. Apague seu conteúdo e cole o seguinte código no arquivo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Panel x="21" y="10" width="790" height="339" layout="absolute" title="Preenchendo inputs automagicamente">

     <mx:DataGrid id="datagrid_pessoas" x="10" y="19" width="750" height="125" dataProvider="{pessoas_xml_list}">
         <mx:columns>
             <mx:DataGridColumn headerText="NOME" dataField="nome" width="200"/>
             <mx:DataGridColumn headerText="ENDEREÇO" dataField="endereco" width="200"/>
             <mx:DataGridColumn headerText="CIDADE" dataField="cidade" width="150"/>
             <mx:DataGridColumn headerText="ESTADO" dataField="uf" width="50"/>
        </mx:columns>
     </mx:DataGrid>

     <mx:Label x="10" y="172" text="Nome"/>
     <mx:Label x="10" y="202" text="Endereço"/>
     <mx:Label x="10" y="232" text="Cidade"/>
     <mx:Label x="10" y="262" text="Estado"/>

     <mx:TextInput id="campo_nome" text="{datagrid_pessoas.selectedItem.nome}" x="84" y="170" width="237"/>
     <mx:TextInput id="campo_endereco" text="{datagrid_pessoas.selectedItem.endereco}" x="84" y="200" width="237"/>
     <mx:TextInput id="campo_cidade" text="{datagrid_pessoas.selectedItem.cidade}" x="84" y="230" width="204"/>
     <mx:TextInput id="campo_uf" text="{datagrid_pessoas.selectedItem.uf}" x="84" y="260" width="35"/>
 </mx:Panel>

 <mx:XMLList id="pessoas_xml_list">
     <clientes>
         <nome>João da Silva</nome>
         <endereco>Rua tal, 135</endereco>
         <cidade>São Paulo</cidade>
         <uf>SP</uf>
     </clientes>
     <clientes>
         <nome>Maria da Silva</nome>
         <endereco>Rua tal, 645</endereco>
         <cidade>São Paulo</cidade>
         <uf>SP</uf>
     </clientes>
     <clientes>
         <nome>Mary Ortega</nome>
         <endereco>Rua Willie Davis, 1982</endereco>
         <cidade>Maringá</cidade>
         <uf>PR</uf>
     </clientes>
 </mx:XMLList>

</mx:Application>

Explicando o código

Criei um componente <mx:Panel>  e inseri dentro dele um <mx:DataGrid> identificando-o com o id=”datagrid_pessoas“. Meu dataGrid será populado por um <mx:XMLList> identificado com id=”pessoas_xml_list”. Dentro do do meu pessoas_xml_list eu criei três clientes usando XML padrão e fiz a chamada no dataGrid o atributo dataProvider={pessoas_xml_list}”.

O ponto mais importante do código está aqui: datagrid_pessoas.selectedItem, pois é dessa forma que os dados da linha do dataGrid obtidos e setados nos atributos text dos TextInputs.

Espero ter ajudado! Até o próximo post!



One Comment on “Flex – Obtendo dados de um DataGrid”

  1. Airton Toyansk disse:

    Sérgio,

    Uma dúvida: existe uma maneira de obter um determinado registro do DataGrid sem que este seja selecionado?
    Algo como escolher a linha e coluna e convertê-lo numa String para exibir num TextInput ou num Alert?

    Abs,

    Airton


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s