configuracoes para a aplicacao como o nome da aplicacao (namespace), qual sera a pasta do projeto onde os arquivos da aplicacao se encontram "app", os controllers a serem carregados para a aplicacao e por ultimo o atributo "autoCreateViewport" que ira criar o Viewport que deve estar na pasta "searchfield_mvc/app/view" com o nome de "Viewport.js".O principio basico para se utilizar esta UX e que o Store utilizado pela Grid deve ser o mesmo informado no atributo "store" da UX SearchField. O codigo abaixo e referente a view da Grid que ira 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 * Metodo que ira inicializar o componente */ ,initComponent: function() { var me = this; if (Ext.isString(me.store)) { me.store = Ext.create('ExtApp.store.Personagens'); } // Aplicando as demais configuracoes na Classe Ext.apply(me, { title : 'Lista dos Personagens' ,columns: [ { xtype: 'rownumberer' } ,{ header: 'Nome' ,dataIndex: 'nome' ,flex: 2 } ,{ header: 'Cla' ,dataIndex: 'cla' ,flex: 1 } ,{ header: 'Nivel' ,dataIndex: 'nivel' ,flex: 1 } ,{ header: 'Vila' ,dataIndex: 'vila' ,flex: 1 } ] ,viewConfig: { emptyText: 'Nao ha 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: 'Nao ha 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 ha muito codigo acima, mas irei explicar somente a parte mais importante do codigo que se encontra entre as linhas #16 e #61 que e o metodo "initComponent".Nas linhas #19 a #21 verifico se o Grid nao contem a instancia 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 #39 a #46 crio o componente para pesquisar os dados na Store da Grid. Note que na linha #44 eu informa a referencia do Store da Grid que foi criado anteriormente. Esse e o ponto fundamental, pois a referencia do Store tem que ser o mesmo utilizado pela Grid, pois caso seja criado um Store somente para esse componente (SearchField) nao resultara no filtro dos dados.Nas linhas #74 a #53 crio a paginacao da Grid utilizando a Classe Ext.toolbar.PagingToolbar e informando a referencia do Store do Grid na linha #49.Ao informar um valor no campo de pesquisa o servidor ira realizar o filtro na coluna "nome" referente ao texto informado.ConclusaoO intuito foi demonstrar como utilizar a UX SearchField na arquitetura MVC do ExtJS4, pois vi algumas duvidas de como utiliza-la e resolvi fazer este.Entao fica a dica quando for utilizar esta UX lembre-se que a referencia do Store da UX deve ser a mesma do Grid.Obrigado pela leitura e ate o proximo poste. SyntaxHighlighter.highlight();