EXT – Dicas e Truques

Bom estou começando a usar a biblioteca EXT js, realmente ela é muito boa, ainda mais agora na versão 2.0. O Problema é que tem algumas coisinhas que você não pega de primeira e fica se matando horas pra achar a solução, então aqui vou eu escrever algumas dicas / notas sobre o assunto.

1. Imagem Em Branco

   A EXT usa uma imagem com dimensões de 1×1px em transparente para definir o espaçamento das coisas, por padrão a EXT vai buscar esta imagem no site oficial, para definir que a imagem seja carregada de uma pasta local:

   Dica: se você estiver usando o linux de um wget http://extjs.com/s.gif para baixar a imagem pq clicar nela para salvar do navegador é bem difícil.

   Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'meusite.com.br/imagens/s.gif';
}


2. ToolTip

   Caso as suas toolTips insistam em não aparecer verifique se você pediu pra elas serem inicializadas antes

   Ext.QuickTips.init();

3. Handler

   Os handler são usados para definir uma ação básica em objeto, como menus e botões, para que o EXTjs não
   espere que você clique no componente antes de executar uma função, é necessário escrever a função dentro de outra function

   
handler:alert('Isso não funciona e vai exibir o alert na hora que a página for carregada');
handler:function(){alert('isso funciona')}


4. Definindo Uma Classe CSS para um botão

   Quando você precisar colocar uma imagem em um botão ou em um menu, é só usar a propriedade, porém no CSS que irá definir o fundo do elemento com a imagem desejada não se esqueça de definir a tag important!

   .grupo{background-image: url("../../imagens/fam/group.gif")!important}

5. Como Fazer um Menu de Contexto em um Grid

   Isso foi discutido nesse tópico do forum, bem fácil de fazer.

6. Customizando Coluna de um GRID com o renderer

   Para personalizar o conteúdo de uma coluna, por exemplo se o valor da coluna moeda for menor do que zero escrever o valor em vermelho, esse tipo de coisa é feito usando o renderer, exemplo.

   
// função que irá formatar o valor
var formatar = {
minimo : function(value,p,r){
var texto = "";
if(value==4){
texto = ""+value+"";
} else {
texto = value;
}
return texto;
}

   // no columModel da célula você coloca
renderer:formatar.minimo

   Esse cidadão fez uns exemplos interessantes sobre esse tema

   Links Importantes

1. extjs.com Site oficial da biblioteca
2. http://extjs.com/deploy/dev/docs/ Api de todas as clases, diz o que é mas poucas vezes mostra exemplos práticos
3. http://extjs.com/forum/ Forum, o pessoal é muito prestativ, então aprenda e ensine.