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

26/12/2011 | By

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.

curso extjs4 aula05 loiane [Curso de ExtJS 4] Aula 05: Criação de Classes

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! icon smile [Curso de ExtJS 4] Aula 05: Criação de Classes

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! icon smile [Curso de ExtJS 4] Aula 05: Criação de Classes

Filed in: Curso ExtJS 4, Ext JS 4, Tutoriais | Tags: , ,

Comments (26)

  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. Menandro Neto

    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. Renato Theodoro

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

    Abraços.

  6. Edson Savi

    Todas as aulas foram ótimas! Parabéns

  7. Loiane, muito boa a aula! Parabéns pelo trabalho e fico no aguardo do próximo módulo.

  8. André

    Olá Loiane !

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

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

    Abraços

  9. 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?

  10. 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?

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

  11. Mais uma aula terminada , gostaria de estar com mais tempo para me dedicar um pouquinho mais , as aulas estão excelentes.

    Parabéns.

  12. Antonio Carlos

    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.

  13. Héliton Nordt

    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.

    • 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.

  14. Alessandro

    Muito bom seu tutorial, bem didático…. Continue assim

  15. Danilo Marcus

    muito boa a aula! parabêns!! estou aprendendo bastante…

  16. Loiane, Parabens, as aulas estão ótimos..

    Atte.

  17. Cleiton Alves

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

    []‘s

  18. Joel

    Obrigador Loiane. Aula sensacional!

  19. Tiago Vieira

    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.

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

  20. Jair

    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?

    • 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