Ola meu caro leitor(a) hoje venho trazer mais um dica sobre o ExtJS4, neste post irei demonstrar com um exemplo pratico como adicionar um monitoramento para efetuar uma determinada acao ao pressionar a tecla ENTER em um Form.Muitos que utilizavam a versao ExtJS3 ao comecar a migrar suas aplicacoes para a versao ExtJS4 sentiram a falta do atributo keys no Form que lhe proporcionava adicionar os codigos das teclas que desejavamos monitorar para que possamos executar uma acao, como por exemplo, ao pressionar ENTER submeter os dados do Form.Para que possamos realizar esse monitoramento na versao ExtJS4 devemos adicionar esse monitoramento utilizando a classe Ext.util.KeyMap. Tambem existem outras formas porem nao irei abordar essas neste post. Se olharmos na API DOC iremos ver alguns exemplos de utilizacao desta classe, como o exemplo demonstrado abaixo:// map one key by key codevar map = new Ext.util.KeyMap({ target: "my-element", key: 13, // or Ext.EventObject.ENTER fn: myHandler, scope: myObject});Nesse exemplo e criado um monitoramento para a tecla ENTER cujo seu codigo e o valor 13. A classe Ext.EventObject contem as constantes com os valores para as teclas que podem ser monitoradas como o caso "Ext.EventObject.ENTER". Abaixo irei detalhar os atributos informados nesse exemplo:- target: nesse atributo deve ser informado para quem deve ser monitorado o evento, ou seja, para qual componente que deve ser monitorado a devida tecla informada no atributo keys. Se olharmos na API DOC iremos ver que ele pode receber varios tipos de dados nesse atributo como o proprio componente, o ID do componente, entre outros.- key: como ja mencionado acima neste atributo deve ser informado o codigo da tecla que deve ser monitorada no componente. No nosso caso o ENTER.- fn: aqui deve ser definida uma funcao que sera chamada quando a tecla informada no atributo key for pressionada dentro do componente. Pode-se utilizar o atributo handler que nao consta na API para informar o metodo que sera executado ao pressionar a tecla.- scope: como o proprio nome diz informa qual sera o scope de execucao do metodo informado no atributo fn, ou seja, qual e objeto que sera referenciado pelo this dentro do metodo.Existem outros exemplos na API DOC que demonstram como adicionar varios monitoramentos para o mesmo componente porem para teclas diferentes. Para maiores detalhes de uma olhada nos exemplos e na descricao de cada um para entender melhor.Irei demonstrar no exemplo abaixo como monitorar a tecla ENTER em um Form, quando pressionado ira validar o Form e informar para o usuario os dados a serem enviados caso este Form esteja valido. Entao vamos ao codigo:Ext.define('ExtExample.form.Panel', { extend: 'Ext.form.Panel' ,alias: 'widget.formexample' ,bodyPadding: 5 ,defaultType: 'textfield' ,frame: true ,fieldDefaults: { anchor: '99%' ,labelWidth: 70 } /** * @cfg {Ext.util.KeyMap} keyMap * Objeto do mapeamento da tecla ENTER */ ,keyMap: null ,initComponent: function() { var me = this; me.items = [{ name: 'nome' ,fieldLabel: 'Nome' ,allowBlank: false }, { name: 'email' ,fieldLabel: 'E-mail' ,allowBlank: false ,vtype: 'email' }]; me.buttons = [{ text: 'Salvar' ,scope: me ,handler: me.saveData }]; me.callParent(); } ,afterRender: function() { var me = this; me.callParent(arguments); me.keyMap = new Ext.util.KeyMap({