Inserindo dados em DataGrid usando ArrayCollection

Fiz um exemplo utilizando a inserção em um ArrayCollection:
O DataGrid está ligado neste ArrayCollection, desta forma as informações são atualizada quando inserimos mais dados no ArrayCollection.

Cadastro.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
 verticalAlign="middle">
 <mx:TitleWindow styleName="opaquePanel" width="567" title="Cadastro de Pessoas">
  <mx:Form width="100%">
   <mx:FormItem label="Código" width="100%">
    <mx:TextInput width="68" id="txiCodigo"/>
   </mx:FormItem>
   <mx:FormItem label="Nome" width="100%">
    <mx:TextInput width="400" id="txiNome"/>
   </mx:FormItem>
   <mx:FormItem label="Idade" width="100%" direction="horizontal">
    <mx:NumericStepper maximum="200" minimum="0" id="nmsIdade"/>
    <mx:Button label="Adicionar" click="adicionar()"/>
   </mx:FormItem>
  </mx:Form>
 
  <mx:DataGrid id="dtgPessoas" width="100%" dataProvider="{dtpListaPessoa}">
   <mx:columns>
    <mx:DataGridColumn headerText="Código" dataField="codigo" width="100" textAlign="center"/>
    <mx:DataGridColumn headerText="Nome" dataField="nome"/>
    <mx:DataGridColumn headerText="Idade" dataField="idade" width="100" textAlign="center"/>
   </mx:columns>
  </mx:DataGrid>
  <mx:Box horizontalAlign="right" width="100%">
   <mx:Button label="Excluir" enabled="{dtgPessoas.selectedIndex!=-1}" click="{dtpListaPessoa.removeItemAt(dtgPessoas.selectedIndex)}"/> 
  </mx:Box>
  
  
  <mx:ControlBar>
  </mx:ControlBar>
 
 </mx:TitleWindow>
 
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   
   [Bindable] private var dtpListaPessoa : ArrayCollection = new ArrayCollection();
   
   private function adicionar():void
   {
    dtpListaPessoa.addItem(
    {
     codigo  : txiCodigo.text,
     nome : txiNome.text,
     idade : nmsIdade.value
    });
    
    txiCodigo.text='';
    txiNome.text='';
    nmsIdade.value=0;
   }
   
  ]]>
 </mx:Script> 
</mx:Application>