EXT – Teclas de Atalho

8 04 2008

Introdução

Existem duas formas básicas de colocar teclas de atalho no EXT:

  1. Usando o evento keydow
  2. Usando o Ext.KeyNav

Evento KeyDown

Usando o manipulados de eventos é possível colocar uma evento em qualquer coisa que tenha id, é bem simples:

Ext.get('seu_id').on('keydown', function(e,fields){
if(e.getKey() == 13){
alert("Enter");
}
});

A função e.getKey() irá retornar um número inteiro referente a tecla que foi pressionada, alguns valores para teclas padrões são:

'esc':27,
'escape':27,
'tab':9,
'space':32,
'enter':13,
'backspace':8,
'scrolllock':145,
'capslock':20,
'numlock':144,
'pause':19,
'insert':45,
'home':36,
'delete':46,
'end':35,
'pageup':33,
'pagedown':34,
'left':37,
'up':38,
'right':39,
'down':40,
'f1':112,
'f2':113,
'f3':114,
'f4':115,
'f5':116,
'f6':117,
'f7':118,
'f8':119,
'f9':120,
'f10':121,
'f11':122,
'f12':123

Ext.KeyNav

Esse é o jeito mais elegante de se colocar teclas de atalho, exemplo:

var combo_nav = new Ext.KeyNav("seu_id",
'enter': function(){
alert("enter pressed");});

Quando usar o Ext.KeyNav tenha sempre cuidado de inserí-lo dentro de um bloco Ext.onReady(function(){ });, caso contrário um erro irá acontecer pois o Ext tentará inserir o evento antes do elemento ser inserido na página.

Grande Abraço a Todos!


Ações

Information

7 responses

9 04 2008
alexandrems

Opaa ext na veiaa. Testando meu avatar.

9 04 2008
battisti

Essa avatar reflete muito bem sua personalidade caninha!

13 04 2008
Rafael Jaques

Huumm..
Eu estava precisando disso!:)

Ahh..
Gostei do layout novo!
Show de bola! ;D

16 09 2008
battisti

Dica do Ivan:

Para usar em conjunto com ALT CRTL e SHIFT

var map = new Ext.KeyMap(windowName, [{
key: [49],
alt: true,
fn: function(){ Ext.getCmp(‘abas-‘+windowName).setActiveTab(0); }
},{
key: [50],
alt: true,
fn: function(){ Ext.getCmp(‘abas-‘+windowName).setActiveTab(1); }
},{
key: [51],
alt: true,
fn: function(){ Ext.getCmp(‘abas-‘+windowName).setActiveTab(2); }
}]);

Referência:
http://extjs.com/forum/showthread.php?t=40533&highlight=getKey+combination+keys

9 12 2008
Gleison

Como criar um enter2tab com extjs?, ou seja quando precionar a tecla enter trocar de campo, e assim ate acabar os campos do formulario e no ultimo dar submit?

seguindo essa ideia:

new Ext.KeyNav(document,
‘enter’: function(e){
var el = e.target;
if(!el.form) return false;
});

11 12 2008
battisti

Cara vou ficar te devendo 😦 to meio parado com o EXT mas se achar a resposta posta ai pra galera!

16 01 2013
Mah

Nuss amei… Achei tão fácil a explicação, mas não estou com sucesso na aplicação. Pode me dar uma dica de aplicação prática?
[ ]s…

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




%d blogueiros gostam disto: