ExtJS 4: Utilizando os métodos "getters" do Controller
Autor: Weslley Alves | Publicado: 2013-01-26T07:43:00-08:00

Olá meu caro leitor(a) hoje venho trazer mais uma dica sobre ExtJS4, irei falar sobre a utilização dos métodos "getters" do Controller que a&nbsp;arquitetura&nbsp;MVC&nbsp;do ExtJS nós traz. Então vamos a dica.
Quando estamos desenvolvendo utilizando a arquitetura MVC na criação do Controller há algumas métodos que são criados debaixo dos panos para facilitar a nossa vida. Na definição do Controller informamos os models, stores e views que este Controller possui, assim o framework irá criar os métodos getters&nbsp;para obter acesso aos Models, Stores e Views do Controller. Há um padrão para a nomenclatura do método a ser criado como é demonstrado abaixo:
- Em relação aos models: será criado um método com a seguinte estrutura "getModelClassNameModel" onde "ModelClassName" é o nome da classe do Model informado no Controller, por exemplo, o model de nome "Personagem" será criado o método "getPersonagemModel". Este método irá retornar o construtor do Model.
- Em relação aos stores:&nbsp;será criado um método com a seguinte estrutura "getStoreClassNameStore" onde "StoreClassName" é o nome da classe do Store informado no Controller, por exemplo, o&nbsp;store&nbsp;de nome&nbsp;"Personagens"&nbsp;será criado o método "getPersonagensStore". Este método irá retornar a instância do Store que foi criada através do seu componente proprietário (owner) como exemplo um Grid.
- Em relação as views:&nbsp;será criado um método com a seguinte estrutura "getPackageNameViewClassNameView" onde "PackageName" é o nome da pasta onde está o arquivo da view e&nbsp;"ViewClassName"&nbsp;nome da classe da View informada no controller, por exemplo, "getPersonagemListView" onde o caminho absoluto do arquivo é "app/views/personagem/List.js". Este método irá retornar o construtor da View.&nbsp;Abaixo está um exemplo da criação de um controller onde informamos os arquivos principais deste:
Ext.define('ExtApp.controller.Personagens', {
     extend: 'Ext.app.Controller'
    ,require: ['Ext.app.Controller']
    ,models: ['Personagem']
    ,stores: ['Personagens']
    ,views: ['personagem.List']
    ,init: function() {
        console.log(this)
    }
});

Entre as linhas #4 à #6 informamos todos os arquivos que este Controller irá utilizar. Abaixo está a imagem do console referente ao código da linha #8.


Veja que foram criados três métodos no controller para que possamos resgatar a referências dos componentes, mas você deve estar se perguntando para que finalidade isso?
Na API DOC na classe Ext.app.Controller no tópico "Generated getter methods" é demonstrado um exemplo de uso desses métodos. Outro exemplo seria a necessidade de estar resgatando o Store para sincronizar os seus dados. Veja o exemplo abaixo que demonstra o&nbsp;monitoramento do evento click&nbsp;de um botão no nosso Controller e as duas formas de se resgatar a referência para o Store do Grid:
me.control({
    'personagemlist button[action=add]' : {
        click: function(btn) {
            // Resgatando o Store pelo Botão selecionado
            var storeByRef = btn.up('grid').getStore();

            // Resgatando o Store pelo método do Controller
            var storeByMethod = this.getPersonagensStore();
            
            // Sincronizando os dados
            storeByMethod.sync();
        }
    }
});

Por esse exemplo podemos notar que o resgate da referência do Store pelo método getter do Controller se torna mais simples do que resgatar a referência através de um componente utilizando os método do ComponenteQuery.

Então é isso pessoal, espero que tenham gostado desta dica, tentarei publicar mais algumas futuramente. Se você tiver alguma dica sobre ExtJS deixe o seu comentário aqui para nós.

Obrigado pela leitura e até o próximo post.

 SyntaxHighlighter.highlight();