EXT – Dicas e Truques

23 01 2008

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 1x1px 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.
Anúncios

Ações

Information

Deixe um comentário

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: