ExtJS 4: Criando métodos "getters" no Controller
Autor: Weslley Alves | Publicado: 2013-01-31T15:47:00-08:00

Olá meu caro leitor(a) em meu último post Utilizando os métodos "getters" do Controller&nbsp;demonstrei a utilização dos métodos getters gerados pelo Controller para que possamos ter acesso aos Models, Stores e Views que este Controller&nbsp;possui. Nesta dica irei demonstrar como gerar os métodos getters para resgatar a referência de um componente criado na aplicação como por exemplo, um Grid, um Form, um DataView, entre outros componentes.
Geralmente temos a necessidade de resgatar a referência para um determinado componente que já está renderizado na nossa aplicação para efetuar uma determinada ação como resgatar os registros selecionados em um Grid ou submeter os dados de um Form através de sua referência, entre outros.
Existem algumas formas de se obter a referência de um componente e uma delas seria informando para o nosso Controller quais componentes necessitamos que sejam criados métodos auxiliares (getters) para que possamos resgatar a sua referência.
Através da propriedade&nbsp;refs&nbsp;da classe&nbsp;Ext.app.Controller&nbsp;podemos informar para quais componentes devem ser criados os métodos getters. Essa propriedade irá receber um array de objetos, onde cada objeto contém um seletor e uma referência para o componente que desejamos resgatar, assim para cada objeto informado será criado um método auxiliar. Veja o exemplo abaixo:
Ext.define('ExtApp.controller.Personagens', {
     extend: 'Ext.app.Controller'
    ,require: ['Ext.app.Controller']
    ,models: ['Personagem']
    ,stores: ['Personagens']
    ,views: ['personagem.List']
    /**
     * Referências para serem criados os métodos getters
     */
    ,refs: [
        { selector: 'personagemlist', ref: 'personagemList' }
    ]
    
    /**
     * Método executado após o lauch da aplicação ser executado
     */
    ,onLaunch: function() {
        console.log(this);
    }
});

Note que no atributo refs eu passei somente um objeto com as propriedades "ref" e "selector" que irá dizer para o Controller qual é o nome da referência (método) a ser criado e qual é o seletor que a classe Ext.ComponentQuery irá utilizar para resgatar a referência deste componente.
Sendo o assim o nosso Controller irá criar um método getter para que seja possível o resgate desse componente. Esse novo método terá a seguinte nomenclatura getRefValue onde "RefValue" é o valor &nbsp;informado na propriedade&nbsp;"ref"&nbsp;do objeto, sendo que sua primeira letra será convertido em maiúscula seguindo o padrão camelcase dos métodos do framework. Assim no nosso exemplo será criado o método "getPersonagemList" conforme imagem abaixo:


Console da referência do Controller

Talvez você esteja se perguntando qual seria a diferença entre os métodos "getPersonagemList" e "getPersonagemListView"? Se olhar novamente o meu post anterior irá ver que o método "getPersonagemListView" que é criado automaticamente pelo Controller irá lhe retornar o construtor da View já o nosso método irá retornar a referência do componente instanciado na aplicação. Alterando o código do método&nbsp;onLaunch&nbsp;conforme abaixo teremos a saída no console do resultado de cada método:
/**
 * Método executado após o lauch da aplicação ser executado
 */
,onLaunch: function() {
    console.log('** Método criado pela Referência **');
    console.log(this.getPersonagemList());
    console.log('** Método do Controller **');
    console.log(this.getPersonagemListView());
}



Métodos criados no Controller

Veja que pela imagem acima no console temos o resultado dos dois métodos onde o primeiro demonstra a referência do nosso componente já o segundo demonstra o construtor deste.

Vamos supor que necessitamos resgatar os registros selecionados no nosso Grid quando o usuário clicar no botão de ação "delete" que existe no toolbar da nossa lista. Assim vamos modificar o nosso código adicionando o monitoramento do evento "click" do botão "Excluir" do nosso toolbar conforme abaixo:
Ext.define('ExtApp.controller.Personagens', {
     extend: 'Ext.app.Controller'
    ,require: ['Ext.app.Controller']
    ,models: ['Personagem']
    ,stores: ['Personagens']
    ,views: ['personagem.List']
    /**
     * Referências para serem criados os métodos getters
     */
    ,refs: [
        { selector: 'personagemlist', ref: 'personagemList' }
    ]
    
    /**
     * Método que irá inicializar os dados do Controller
     */
    ,init: function() {
        var me = this;
        
        me.control({
            'personagemlist button[action=delete]': {
                click: me.onClickBtnDelete
            }
        });
    }
    
    /**
     * Método que será executado ao clicar no botão "Excluir"
     * @param {Ext.button.Button} btn Botão selecionado
     */
    ,onClickBtnDelete: function(btn) {
        // Resgatando as seleções pelo Botão selecionado
        console.log(btn.up('grid').getSelectionModel().getSelection());
        
        // Resgatando as seleções pelo método criado pelo Controller
        console.log(this.getPersonagemList().getSelectionModel().getSelection());
    }
});

Desta forma quando o usuário clicar no botão "Excluir" devemos resgatar os registros selecionados na nossa lista utilizando o método getSelection da classe Ext.selection.Model do framework. Como é demonstrado no método "onClickBtnDelete" do nosso Controller. A saída dos dois consoles terão o mesmo resultado, pois a forma de resgatar os registros selecionados são os mesmos, porém a forma de resgatar a referência da lista é diferente.

Instanciando o componente caso esse não exista
Através dos objetos passados para a propriedade&nbsp;refs&nbsp;do nosso Controller&nbsp;podemos informar que caso não exista o componente&nbsp;instanciado este deve ser criado. Se olharmos na API DOC do atributo&nbsp;refs&nbsp;iremos ver que além dos atributos "ref" e "selector" existem os atributos:
- autoCreate: que informa se deve ser criado o componente caso esse não esteja criado
-forceCreate: que informa se deve ser criado a instância do componente toda vez que o método getter criado for chamado.
Algo que não é mostrado na API DOC (porém se olharmos os comentários desta propriedade veremos alguns exemplos) são as propriedades adicionais que devemos informar para que o Controller saiba qual é o tipo de componente a ser criado, ou seja, o seu xtype. Veja o exemplo abaixo:
/**
 * Referências para serem criados os métodos getters
 */
,ref: [
     { selector: 'personagemlist', ref: 'personagemList' }
    ,{ 
         ref: 'personagemForm'
        ,selector: 'personagemform'
        ,autoCreate: true
        // Opções adicionais para criar o componente
        ,xtype: 'personagemform'
        ,itemId: 'personagem-form'
        ,title: 'Formulário do Personagem'
    }
]

Neste exemplo adicionamos mais um objeto para nossa propriedade refs informando que deve ser criado o componente (autoCreate: true) e passamos as demais opções para criar este componente, onde somente o xtype já resolveria a criação deste, pois qualquer propriedade diferente das informadas na API DOC da propriedade refs que passarmos neste objeto será aplicado a nova instância do componente que no nosso caso serão itemId e o title. Assim será criado o método "getPersonagemForm" que ao ser chamado irá criar o nosso componente caso esse não esteja instanciado na nossa aplicação e retornar a sua referência.


Novo método getter gerado pelo Controller

Criando referências para componentes não pertencentes ao Controller atual
Nos exemplos acima foram demonstradas a criação dos métodos auxiliares para resgatar os componentes do Controller atual, porém podemos resgatar qualquer referência dos componentes da nossa aplicação, informando um seletor que a classe Ext.ComponentQuery possa resgatar através dos componentes instanciados na aplicação. No exemplo abaixo estamos criando um método auxiliar para resgatar o Viewport da nossa aplicação:


Novo método getter para resgatar o Viewport da aplicação

Veja pela imagem que foi criado o novo método "getViewport" que ao ser executado irá retornar a instância do Viewport da aplicação.

O recurso de criar referências para os componentes pode facilitar muito a nossa vida no dia a dia no desenvolvimento com ExtJS principalmente em grandes e médias equipes de desenvolvimento, pois podemos encapsular os resgates dos componentes através dos métodos getters criados, assim o desenvolvedor não tem a necessidade de navegar na hierarquia dos componentes para resgatar a referência desejada e sim precisa somente utilizar o método disponível pelo Controller.

"Por hoje é só pessoal". Espero que tenham gostado desta dica, obrigado pela leitura e até o próximo post.

 SyntaxHighlighter.highlight();