Ola meu caro leitor(a) em meu ultimo post Utilizando os metodos "getters" do Controller demonstrei a utilizacao dos metodos getters gerados pelo Controller para que possamos ter acesso aos Models, Stores e Views que este Controller possui. Nesta dica irei demonstrar como gerar os metodos getters para resgatar a referencia de um componente criado na aplicacao como por exemplo, um Grid, um Form, um DataView, entre outros componentes.Geralmente temos a necessidade de resgatar a referencia para um determinado componente que ja esta renderizado na nossa aplicacao para efetuar uma determinada acao como resgatar os registros selecionados em um Grid ou submeter os dados de um Form atraves de sua referencia, entre outros.Existem algumas formas de se obter a referencia de um componente e uma delas seria informando para o nosso Controller quais componentes necessitamos que sejam criados metodos auxiliares (getters) para que possamos resgatar a sua referencia.Atraves da propriedade refs da classe Ext.app.Controller podemos informar para quais componentes devem ser criados os metodos getters. Essa propriedade ira receber um array de objetos, onde cada objeto contem um seletor e uma referencia para o componente que desejamos resgatar, assim para cada objeto informado sera criado um metodo 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'] /** * Referencias para serem criados os metodos getters */ ,refs: [ { selector: 'personagemlist', ref: 'personagemList' } ] /** * Metodo executado apos o lauch da aplicacao ser executado */ ,onLaunch: function() { console.log(this); }});Note que no atributo refs eu passei somente um objeto com as propriedades "ref" e "selector" que ira dizer para o Controller qual e o nome da referencia (metodo) a ser criado e qual e o seletor que a classe Ext.ComponentQuery ira utilizar para resgatar a referencia deste componente.Sendo o assim o nosso Controller ira criar um metodo getter para que seja possivel o resgate desse componente. Esse novo metodo tera a seguinte nomenclatura getRefValue onde "RefValue" e o valor informado na propriedade "ref" do objeto, sendo que sua primeira letra sera convertido em maiuscula seguindo o padrao camelcase dos metodos do framework. Assim no nosso exemplo sera criado o metodo "getPersonagemList" conforme imagem abaixo:Console da referencia do ControllerTalvez voce esteja se perguntando qual seria a diferenca entre os metodos "getPersonagemList" e "getPersonagemListView"? Se olhar novamente o meu post anterior ira ver que o metodo "getPersonagemListView" que e criado automaticamente pelo Controller ira lhe retornar o construtor da View ja o nosso metodo ira retornar a referencia do componente instanciado na aplicacao. Alterando o codigo do metodo onLaunch conforme abaixo teremos a saida no console do resultado de cada metodo:/** * Metodo executado apos o lauch da aplicacao ser executado */,onLaunch: function() { console.log('** Metodo criado pela Referencia **'); console.log(this.getPersonagemList()); console.log('** Metodo do Controller **'); console.log(this.getPersonagemListView());}Metodos criados no ControllerVeja que pela imagem acima no console temos o resultado dos dois metodos onde o primeiro demonstra a referencia do nosso componente ja o segundo demonstra o construtor deste.Vamos supor que necessitamos resgatar os registros selecionados no nosso Grid quando o usuario clicar no botao de acao