ExtJS 4: Utilizando UX SearchField MVC ExtJS4
Autor: Weslley Alves | Publicado: 2012-10-13T19:20:00-07:00

Olá meu caro leitor(a) hoje venho trazer mais um poste sobre o ExtJS4. Neste irei demonstrar como utilizar a UX SearchField que vem junto com o framework utilizando a arquitetura MVC do ExtJS4.
Neste irei somente explicar as partes mais importantes dos códigos, pois todo o código está disponível no meu Github e estão comentados assim deduzo que será fácil o entendimento.
Como o foco é demonstrar como utilizar a UX SearchField do framework a parte Server (PHP) eu desenvolvi só uma base para construir esse exemplo, assim não utilizei todos os recursos que o PHP tem, mas tentei fazer uma base para os próximos exemplos (assim espero).&nbsp;A imagem abaixo demonstra como o exemplo ficará no final deste poste.


Exemplo de utilização da UX SearchField

Então vamos aos códigos.

Pré requisitos
Servidor Web. Irei utilizar o WAMP caso deseja instalar você pode seguir os passos do meu poste sobre&nbsp;Instalando e Configurando o WAMP.
Configuração do Banco de Dados.
SDK do ExtJS (até a publicação deste estava na versão ExtJS 4.1.1a)&nbsp;download
Código fonte do exemplo download

Criando a estrutura
Baixe o código fonte do exemplo pelo meu Github no repositório extjs4-searchfield-mvc pelo botão "Downloads". Descompactar o arquivo no DOCUMENT_ROOT do seu servidor web e renomeie esta para "searchfield_mvc" (sem&nbsp;aspas).

Criando o Banco de Dados
Este exemplo utiliza os dados de um Banco de Dados para gerar os registros a serem exibidos na Grid do exemplo onde será utilizada a UX SearchField para filtrar esses dados. Utilize o script SQL que está dentro da pasta&nbsp;"searchfield_mvc/sql" para gerar os dados de exemplo.
O arquivo&nbsp;"searchfield_mvc/php/Model.php" contém os dados para a conexão no Banco de Dados dê uma olhada neste se os dados batem com o acesso ao seu Banco, caso não ajuste os dados como usuário, senha, etc.

Adicionando o framework no exemplo
No código fonte existe a pasta "extjs" que se encontra em "searchfield_mvc/extjs" nesta pasta deve ser inserido os arquivos do ExtJS4. Assim faça o&nbsp;download&nbsp;do framework e renomeia a pasta para&nbsp;"extjs" e copie esta para o diretório&nbsp;"searchfield_mvc" sobrescrevendo a pasta anterior.

Detalhando o código
Crie uma pasta como nome "ux" no diretório&nbsp;"searchfield_mvc/extjs/" e dentro da pasta "ux" crie outra pasta com o nome de "form", copie o arquivo&nbsp;"SearchField.js" que se encontra dentro do diretório&nbsp;"searchfield_mvc/extjs/examples/ux/form" para essa nova pasta ("searchfield_mvc/extjs/ux/form").
Abaixo está detalhado o código do arquivo&nbsp;"searchfield_mvc/app.js" que será o responsável por criar a nossa aplicação.
Ext.Loader.setConfig({
     enabled: true
    ,paths: {
         'Ext': 'extjs/scr'
        ,'Ext.ux': 'extjs/ux'
    }
});

Ext.application({
     name: 'ExtApp'
    ,appFolder: 'app'
    ,controllers: [ 'Pages', 'Personagens' ]
    ,autoCreateViewport : true
});

Quem já desenvolve utilizando a arquitetura MVC do ExtJS4 já está familiarizado com o código acima, mas para os que ainda não entende o que está acontecendo irei informar abaixo um breve detalhamento do código:
Na linha&nbsp;#2&nbsp;informa para a Classe Ext.Loader que deve ser resgatados os arquivos por demanda, ou seja, deve ser requisitado os arquivos requiridos pela aplicação.
Nas linhas&nbsp;#3&nbsp;à&nbsp;#6&nbsp;informo no atributo&nbsp;"paths"&nbsp;um objeto informando a pasta onde estão os arquivos referente ao namespace. Como no caso o namespace "Ext" a&nbsp;Classe&nbsp;Ext.Loader&nbsp;deve procurar pelo arquivo dentro do diretório&nbsp;"searchfield_mvc/extjs/src".
Nas linhas&nbsp;#9&nbsp;à&nbsp;#14&nbsp;é informado as configurações para a aplicação como o nome da aplicação (namespace), qual será a pasta do projeto onde os arquivos da aplicação se encontram&nbsp;"app", os controllers a serem carregados para a aplicação e por último o atributo&nbsp;"autoCreateViewport" que irá criar o Viewport que deve estar na pasta&nbsp;"searchfield_mvc/app/view" com o nome de&nbsp;"Viewport.js".

O princípio básico para se utilizar esta UX é que o Store utilizado pela Grid deve ser o mesmo informado no atributo&nbsp;"store" da UX SearchField. Ó código abaixo é referente a view da Grid que irá exibir os dados dos personagens contidos no Banco de Dados.
Ext.define('ExtApp.view.personagem.List',{
     extend: 'Ext.grid.Panel'
    ,requires: [
        'Ext.grid.Panel',
        'Ext.grid.RowNumberer',
        'Ext.toolbar.Toolbar',
        'Ext.toolbar.Paging',
        'Ext.ux.form.SearchField'
    ]
    ,alias : 'widget.personagemlist'
    ,store: 'Personagens'
    /**
     * @override
     * Método que irá inicializar o componente
     */
    ,initComponent: function() {
        var me = this;
        
        if (Ext.isString(me.store)) {
            me.store = Ext.create('ExtApp.store.Personagens');
        }
        
        // Aplicando as demais configurações na Classe
        Ext.apply(me, {
             title : 'Lista dos Personagens'
            ,columns: [
                 { xtype: 'rownumberer' }
                ,{ header: 'Nome'   ,dataIndex: 'nome'  ,flex: 2 }
                ,{ header: 'Clã'    ,dataIndex: 'cla'   ,flex: 1 }
                ,{ header: 'Nível'  ,dataIndex: 'nivel' ,flex: 1 }
                ,{ header: 'Vila'   ,dataIndex: 'vila'  ,flex: 1 }
            ]
            ,viewConfig: {
                emptyText: 'Não há registros a serem exibidos'
            }
            ,dockedItems: [{
                 dock: 'top'
                ,xtype: 'toolbar'
                ,items: [{
                     fieldLabel: 'Pesquisar pelo nome'
                    ,labelWidth: 110
                    ,flex: 1
                    ,xtype: 'searchfield'
                    ,store: me.store
                    ,paramName: 'filter'
                }]
            }, {
                 xtype: 'pagingtoolbar'
                ,store: me.store
                ,dock: 'bottom'
                ,displayInfo: true
                ,emptyMsg: 'Não há registros a serem exibidos'
                ,displayMsg: 'Exibindo {0} - {1} de {2} registro(s)'
            }]
        });
        
        me.callParent(arguments);
        
        // Carregando os dados do Store
        me.store.load();
    }
});

Sei que há muito código acima, mas irei explicar somente a parte mais importante do código que se encontra entre as linhas&nbsp;#16&nbsp;e&nbsp;#61&nbsp;que é o método "initComponent".
Nas linhas&nbsp;#19&nbsp;à&nbsp;#21&nbsp;verifico se o Grid não contém a instância do seu Store assim crio este. Assim com o Store criado posso informar este nos demais componentes que necessitam deste como a UX SearchField e o componente PagingToolbar.
Nas linhas&nbsp;#39&nbsp;à&nbsp;#46&nbsp;crio o componente para pesquisar os dados na Store da Grid. Note que na linha&nbsp;#44&nbsp;eu informa a referência do Store da Grid que foi criado anteriormente. Esse é o ponto fundamental, pois a referência do Store tem que ser o mesmo utilizado pela Grid, pois caso seja criado um Store somente para esse componente (SearchField) não resultara no filtro dos dados.
Nas linhas&nbsp;#74&nbsp;à&nbsp;#53&nbsp;crio a paginação da Grid utilizando a&nbsp;Classe&nbsp;Ext.toolbar.PagingToolbar&nbsp;e informando a referência do Store do Grid na linha&nbsp;#49.
Ao informar um valor no campo de pesquisa o servidor irá realizar o filtro na coluna "nome" referente ao texto informado.

Conclusão
O intuito foi demonstrar como utilizar a UX SearchField na arquitetura MVC do ExtJS4, pois vi algumas dúvidas de como utiliza-lá e resolvi fazer este.
Então fica a dica&nbsp;quando for utilizar esta UX lembre-se que a referência do Store da UX deve ser a mesma do Grid.
Obrigado pela leitura e até o próximo poste.

 SyntaxHighlighter.highlight();