Ola 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 codigos, pois todo o codigo esta disponivel no meu Github e estao comentados assim deduzo que sera facil o entendimento.Como o foco e demonstrar como utilizar a UX SearchField do framework a parte Server (PHP) eu desenvolvi so uma base para construir esse exemplo, assim nao utilizei todos os recursos que o PHP tem, mas tentei fazer uma base para os proximos exemplos (assim espero). A imagem abaixo demonstra como o exemplo ficara no final deste poste.Exemplo de utilizacao da UX SearchFieldEntao vamos aos codigos.Pre requisitosServidor Web. Irei utilizar o WAMP caso deseja instalar voce pode seguir os passos do meu poste sobre Instalando e Configurando o WAMP.Configuracao do Banco de Dados.SDK do ExtJS (ate a publicacao deste estava na versao ExtJS 4.1.1a) downloadCodigo fonte do exemplo downloadCriando a estruturaBaixe o codigo fonte do exemplo pelo meu Github no repositorio extjs4-searchfield-mvc pelo botao "Downloads". Descompactar o arquivo no DOCUMENT_ROOT do seu servidor web e renomeie esta para "searchfield_mvc" (sem aspas).Criando o Banco de DadosEste exemplo utiliza os dados de um Banco de Dados para gerar os registros a serem exibidos na Grid do exemplo onde sera utilizada a UX SearchField para filtrar esses dados. Utilize o script SQL que esta dentro da pasta "searchfield_mvc/sql" para gerar os dados de exemplo.O arquivo "searchfield_mvc/php/Model.php" contem os dados para a conexao no Banco de Dados de uma olhada neste se os dados batem com o acesso ao seu Banco, caso nao ajuste os dados como usuario, senha, etc.Adicionando o framework no exemploNo codigo fonte existe a pasta "extjs" que se encontra em "searchfield_mvc/extjs" nesta pasta deve ser inserido os arquivos do ExtJS4. Assim faca o download do framework e renomeia a pasta para "extjs" e copie esta para o diretorio "searchfield_mvc" sobrescrevendo a pasta anterior.Detalhando o codigoCrie uma pasta como nome "ux" no diretorio "searchfield_mvc/extjs/" e dentro da pasta "ux" crie outra pasta com o nome de "form", copie o arquivo "SearchField.js" que se encontra dentro do diretorio "searchfield_mvc/extjs/examples/ux/form" para essa nova pasta ("searchfield_mvc/extjs/ux/form").Abaixo esta detalhado o codigo do arquivo "searchfield_mvc/app.js" que sera o responsavel por criar a nossa aplicacao.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 ja desenvolve utilizando a arquitetura MVC do ExtJS4 ja esta familiarizado com o codigo acima, mas para os que ainda nao entende o que esta acontecendo irei informar abaixo um breve detalhamento do codigo:Na linha #2 informa para a Classe Ext.Loader que deve ser resgatados os arquivos por demanda, ou seja, deve ser requisitado os arquivos requiridos pela aplicacao.Nas linhas #3 a #6 informo no atributo "paths" um objeto informando a pasta onde estao os arquivos referente ao namespace. Como no caso o namespace "Ext" a Classe Ext.Loader deve procurar pelo arquivo dentro do diretorio "searchfield_mvc/extjs/src".Nas linhas #9 a #14 e informado as