ExtJS 4: Gerando os métodos getters e setters automaticamente
Autor: Weslley Alves | Publicado: 2012-12-12T15:50:00-08:00

Olá meu caro leitor(a) hoje venho dar início há uma série de postes com algumas dicas sobre o&nbsp;ExtJS4&nbsp;que podem facilitar a sua vida no desenvolvimento.&nbsp;A maior parte destas dicas são vivências que tive no meu dia a dia de desenvolvimento utilizando este framework e espero que essas possam ajudar a muitos a escreverem menos e fazer mais com ExtJS4.
Nesta primeira dica irei falar sobre a&nbsp;geração automática dos métodos&nbsp;getters&nbsp;e&nbsp;setters&nbsp;na criação de uma nova classe. Esse é um dos importantes recursos que a versão quatro do framework&nbsp;trouxe para nós desenvolvedores.
Utilizando o atributo&nbsp;config&nbsp;da classe&nbsp;Ext.Class&nbsp;podemos informar um objeto com os atributos que devem ser criados automaticamente os métodos getters e setters.&nbsp;A nomenclatura desses métodos seguem o padrão get[NomeDoAtributo] e set[NomeDoAtributo], onde o valor de&nbsp;[NomeDoAtributo] será o nome do atributo com a primeira letra em&nbsp;maiúscula. Como por exemplo, o atributo "name"&nbsp;teria os métodos&nbsp;setName e getName criados.&nbsp;Veja o exemplo abaixo:
// Definindo a nova Classe
Ext.define('User', {
    config: {
         name: ''
        ,email: ''
        ,type: 0
    }
    // Iniciando a classe
    ,constructor: function(cfg) {
        this.initConfig(cfg);
    }
});

// Instanciando a nova Classe
var aluno = new User({
     name: 'Legolas'
    ,email: 'legolas@mail.com'
    ,type: 1
});

console.log('Name:' + aluno.getName());
console.log('E-mail:' + aluno.getEmail());
console.log('Type:' + aluno.getType());

// Atualizando os dados
aluno.setName('Hiei');
console.log('Name (update):' + aluno.getName());

Note que nas linhas #3 a #7 foi informado no atributo config as propriedades da classe que necessitam da criação dos métodos&nbsp;getters&nbsp;e&nbsp;setters&nbsp;automaticamente. E no seu método construtor linha na&nbsp;#10 executamos o método initConfig da classe Ext.Base para criar os métodos e aplicar os valores nos atributos.

No exemplo acima temos que chamar o método initConfig, pois estamos criando uma classe que não possui os métodos da classe base, ou seja, não estamos utilizando herança (extend) nesta classe. Assim deve ser chamado esse método no construtor.
Quando utilizamos herança, implicitamente o método&nbsp;initConfig&nbsp;é chamado na criação da classe. Assim devemos só informar no atributo&nbsp;config&nbsp;os atributos que necessitam da criação dos métodos&nbsp;getters&nbsp;e&nbsp;setters. Abaixo temos um outro exemplo utilizando a herança do ExtJS, neste é criado uma nova classe "MyPanel" que herda (extend) da classe Ext.panel.Panel.

Ext.onReady(function(){
    // Definindo a nova classe
    Ext.define('MyPanel', {
         extend: 'Ext.panel.Panel'
        ,alias: 'widget.mypanel'
        ,width: 320
        ,height: 100
        ,title: 'Meu Panel'
        ,bodyPadding: 10
        // Atributos que devem ser gerados os métodos
        ,config: {
             userId: null
            ,userName: null
        }
        ,initComponent: function() {
            var me = this

            me.html = me.getHtmlString()

            me.callParent(arguments);
        }
        /**
         * Gerando o HTML a ser exibido no body do panel
         * @return HTML com o texto formatado
         */
        ,getHtmlString: function() {
            var me = this;

            return Ext.String.format('O usuário {0} está atenticado com o ID {1}', me.userName, me.userId);
        }
    });

    // Método que irá resgatar os valores dos atributos
    var getData = function(btn) {
        var panel = btn.up('mypanel'),
            msg = Ext.String.format('Atributo "userId": {0} Atributo "userName": {1}', panel.getUserId(), panel.getUserName());

        Ext.Msg.alert('Valores atuais', msg);
    };

    // Método que irá atualizar os valores dos atributos
    // utilizando os métodos getters e setters criados
    var updateValues = function(btn) {
        var panel = btn.up('mypanel');

        // Alterando os valores dos atributos
        panel.setUserId(2);
        panel.setUserName('Kakashi');
    };

    // Atualizando o HTML do Panel
    var updatePanel = function(btn) {
        var panel = btn.up('mypanel');

        panel.update(panel.getHtmlString());
    };

    // Criando a nova classe
    var panel = Ext.create('MyPanel', {
         userId: 1
        ,userName: 'Legolas'
        ,renderTo: Ext.getBody()
        ,dockedItems: [{
             xtype: 'toolbar'
            ,dock: 'bottom'
            ,items: [{
                 text: 'Resgatar dados'
                ,handler: getData
            }, {
                 text: 'Alterar valores'
                ,handler: updateValues
            }, {
                 text: 'Atualizar panel'
                ,handler: updatePanel
            }]
        }]
    });
});

Veja por esse exemplo que não necessitamos da chamada do método&nbsp;initConfig&nbsp;para a criação dos métodos, pois estes foram criados na definição da classe. Neste exemplo os botões "Resgatar dados" e "Alterar valores" utilizam esses novos métodos para resgatar e atualizar os valores dos atributos.

Espero que tenham gostado e irei postar mais algumas dicas em breve.&nbsp;Um forte abraço e obrigado pela leitura.

 SyntaxHighlighter.highlight();