[Curso de ExtJS 4] Aula 05: Criação de Classes

Vídeo/Screencast de hoje: quinta aula do curso gratuito de Ext JS 4!

Na aula de hoje vamos aprender como criar uma classe usando Ext JS 4, e como instanciar essa classe. Esses conceitos são base para facilitar o entendimento do framework e deixar mais fácil o aprendizado de componentes.

Quem quiser ver todas as aulas já publicadas, é só clicar aqui.

Se vocês assistirem ao vídeo, irão ver que acontece uma exceção na primeira vez que tento executar o código. Eu não uso script para esses screencasts e erros podem acontecer. O meu objetivo é deixar o mais natural possível, e erros acontecem sempre quando estamos desenvolvendo. Quando erros como esse acontecem, procuro mostrar como resolver, como fiz no vídeo.

Espero que gostem dessa aula e fico no aguardo do feedback de vocês! :)

Requerimentos:

  • Ext JS 4 SDK
  • Servidor Apache (não é obrigatório, mas recomendado ter instalado na máquina) – vai nos ajudar a executar alguns exemplos mais pra frente no curso.
  • Editor de Texto (qualquer um de sua preferência). No vídeo usei o Sublime Text 2 (tem pra Mac OS, Windows e Linux – a versão shareware não expira!)
  • Browser (de preferência Firefox com Firebug ou Chrome).

Vídeo:

YouTube: http://youtu.be/24GDWQc7fZc

Códigohttps://github.com/loiane/curso-extjs4

Slides:

Até a próxima aula! :)

26 thoughts on “[Curso de ExtJS 4] Aula 05: Criação de Classes

  1. Criar a classe com “new Usuario” é muito feio ?? Nao entendi, já que é o padrão das outras linguagens. Se todo o meu código tiver com new qual o problema?

    Não entendi o porquê da ênfase em não usar o New…Só se não funciona com os namespaces.. então tudo bem…

    O vídeo tá ótimo, parabéns pelo curso !!!

  2. Oi Daniel,

    Instanciar uma classe com new é normal até a versão 3 do framework. A partir da versão 4, o sistema de classes do ExtJS mudou, e usar o new pode trazer uma série de problemas, por isso deve ser evitado ao máximo.
    Na aula sobre carregamento dinâmico vou explicar um pouco mais sobre isso.

    []’s

  3. Parabéns, voce tem ótima didática e consegue transmitir muito bem o conteúdo.
    Fico ansioso para a publicação da próxima aula.

  4. Olá, mais uma aula excelente… gostei muito de ver como funciona o sistema de classes do EXT JS, fiz umas telinhas mas agora devo estruturar melhor minha aplicação.

    Valeu e Parabéns…

    Menandro Neto

  5. Mais uma vez parabéns. Estou assistindo todas e praticando bastante. Esperando pela próxima aula.

    Abraços.

  6. Olá Loiane !

    Podemos usar assim de alguma forma, para atender alguma necessidade ?

    var usuario = Ext.create(‘Usuario’);
    usuario.nome = ‘André';

    Abraços

  7. Loiane, li na documentação que há diferença entre usar Ext.define() e Ext.ClassManager.create().

    Segundo a documentação, o primeiro permite a definição de “overrides” enquanto o outro não.

    O que seriam esses overrides?

  8. Loiane boa tarde… as video-aulas até agora estão sensacionais… sua forma de transmitir o conteúdo também é muito boa e deixa a gente a vontade. parabéns.

    Aqui comigo o código rodou legal, porém no dev tools do Chrome houve uma msg de erro que não aconteceu no firebug que rodou 100%… olha só:

    1) Firefox + firebug:
    callback foi chamado… aula05.js (linha 24)

    construtor foi chamado… aula05.js (linha 12)

    Object { superclass={…}, config={…}, $className=”Usuario” aula05.js (linha 28)

    2) Chrome + Dev Tools
    callback foi chamado… aula05.js:12

    construtor foi chamado… aula05.js:28

    Ext.Class.m aula05.js:28

    Uncaught Error: “create” can only be used in extension processes. See the content scripts documentation for more details extensions/schema_generated_bindings.js:662

    Posso considerar isso como um erro, ou está tudo bem?

    1. Oi Wemerson,
      Tem alguma coisa errada. Posta seu código aqui pra eu dar uma olhada e ver o que está acontecendo.
      []’s

  9. Oi Loiane,

    Parabéns, até agora tudo certo, configurei o nginx ao invés do apache para rodar a documentação e exemplos do extjs4, funcionando perfeito, esta aula foi bem didática, o seu curso é superior há muitos cursos que já fiz online, organização e clareza é que o que vivenciei aqui. E detalhe o meu livro chegou, demorou mas está na mão.

  10. Oi, tudo bom Loiane? Estou gostando muito das aulas.

    Estou com uma dúvida quanto a essa aula, se eu remover o constructor que você declarou os objetos não recebem as propriedades que eu defino quando instancio a classe, por exemplo:

    // ** Sem o constructor **

    Ext.define(‘Usuario’, {
    nome: ‘Hello’
    });

    var usuario = Ext.create(‘Usuario’, { nome: ‘World’ });

    console.log(usuario.nome); // retorna Hello

    // ** Com o constructor **

    Ext.define(‘Usuario’, {
    nome: ‘Hello’,

    constructor: function(options)
    {
    Ext.apply(this, options || {})
    }
    });

    var usuario = Ext.create(‘Usuario’, { nome: ‘World’ });

    console.log(usuario.nome); // retorna World

    Na aula você disse que o Ext JS já declara o constructor pra mim, mas isto não está acontecendo, fiz algo errado?

    Obrigado.

    1. Olá Héliton,

      O Ext gera um construtor vazio automaticamente quando não declaramos nenhum.
      Mas no caso de querer mudar os valores, temos que sobrescrever o construtor.

  11. Olá Loiane! Parabéns pelas video-aulas, estão ótimas! Obrigado por compartilhar estas informações conosco!

    []’s

  12. Loiane,

    Quando eu defino uma classe e instancio mais de um objeto da mesma classe, e logo depois utilizo um método para adicionar valores em um array definido como propriedade dessa classe, o valor que adiciono no objeto “a” também aparece nos objetos “b” e “c”. Estou utilizando a versão 4.1.1.

    ex: a = Ext.create(‘User’);
    b = Ext.create(‘User’);
    c = Ext.create(‘User’);

    a.addPhone(‘8888888′);

    Obrigado.

    1. depende de como vc declarou esse array. Ele pode ficar disponível para todas as instancias ou para apenas a instancia atual.
      []’s

  13. Boa noite.
    Tudo bem.
    Estou acompanhando suas aulas, que são excelentes por sinal, porem ocorreu-me uma dúvida.
    Na definição da classe Usuario foram criados duas propriedades (nome, senha).
    E na criação do objeto usuario foi passado um array de opções com nome e senha alimentados.
    Porem as propriedades, permaneceram inalteradas no objeto.
    A minha pergunta é a seguinte:
    O que são as propriedades das classes?
    São as variáveis criadas dentro da definição ou os parametros passados no construtor?
    Se são as variáveis criadas dentro da definição da classe, como faço para alimenta-las dentro do objeto criado?
    Ou as opções passada no criador é que serão consideradas as propriedades do objeto?
    Se for assim então eu não preciso da definição dentro da classe, basta passar pela opção de criação do construtor.

    Poderia me ajudar nesta questão, por favor?

    1. Oi Jair,
      algumas coisas mudaram na versão nova.
      Se vc simplesmente passa pelo construtor, vc consegue usar a propriedade. A quesTão de vc definir primeiro é apenas para deixar o código mais organizado e mais fácil de entender, mas nada te impede de passar uma propriedade que não existe e não foi declarada.
      Isso não é do extjs, e sim do javascript.
      []’s

Comments are closed.