É importante dar retorno visual ao usuário quando uma ação que requer determinado tempo de espera acontece. Ao carregar um formulário, salvar um novo cadastro, ou até entrar em uma tela que demora para renderizar, toda espera tem que ser indicada ao usuário. Isso cria uma sensação muito melhor do que simplesmente deixá-lo encarar uma tela “congelada”.
Pensando nisso existe o método mask() da classe Ext.Element. Acontece que essa método somente cria uma máscara cinza transparente por cima do elemento, não adiciona texto nem aquele famoso Ãcone que indica carregamento. Pensando nisso publico mais uma funcionalidade presente em meu framework, o override de Ext.Element que cria o método setLoading().
O método setLoading() é mais dinâmico e permite criar máscaras personalizando o texto mostrado, e também controlar se a máscara será transparente ou opaca. Postei o código juntamente com um novo exemplo, aproveitem!
Demo Online
Posts relacionados:
Show de bola, Parabéns Bruno pelo post. Sucessooooo
Show heim…. bem pratico !!!
Parabens…..
Muito bom este seu post hein?
Mas uma coisa.. e como que seria por ex:
eu clico em “visualizar permissões”.. e ele travar toda a tela..
do jeito q esta so “trava” a tela que abre.. com as opções..
Obrigado.
Olá Wendell. Para bloquear a tela toda bastaria aplicar a máscara ao corpo da página e não ao corpo da janela de permissões: Ext.getBody().setLoading(true); . Como essa extensão sobrescreve a classe Ext.Element, qualquer elemento da tela pode receber essa máscara. Abs!
Olá Bruno, sou um usuário do ExtJS.BR, gostaria de parabeniza-lo pelo BLOG, excelente.
Até mais.