Ejemplo listo – Filtrar Store / Filtro Remoto / RemoteFilter

Agradecimientos a : http://www.extjses.com/ejemplos-proyectos/ejemplo-listo-filtrar-store-filtro-remoto-remotefilter-t3187.html

Para los principiantes asi como yo mismo, sé que es difícil hacer algunas cosas cuando no si tiene los conocimientos adecuados.
Por lo tanto, la documentación nos da el soporte y el foro más grande apoyo y más que una ayuda, a veces con ejemplos muy iluminados.
Estoy a compartir con ustedes lo hizo; hacer um Filtro de Store com ventana de busca al Servidor con PHP.
He bajado um ejemplo de Loine Groner e hizo los cambios para lograr exito al buscar datos en lo servidor.
Lo ejemplo está en português pero lo mas importante és entender la lógica de RemoteFilter.

Entonces vamos a ver

01 – Bajar el ejemplo que se encuentra en el link: https://github.com/loiane/extjs4-mvc-js … -php-mysql

02 – Haga la configuraciones para el programa se ejecuta en el servidor.
2.1- En la carpeta php – cambios en el fichero conectar.php
a – $servidor = “localhost”; o tu ruta de preferencia
b – $senha = “”; contraseña se asi necesitar

2.2- En el fichero index.html haga los cambios con la rutas do Extjs4

03 – Cambios a serem ejecutados.
03.1 – Crear la ventana de busqueda.
a – En la carpeta view/contato haga una cópia do fichero Formulario.js e renombre para Filtro.js
Abra el fichero Filtro.js e haga los cambios :
linea 1  – Cambiar el nombre Formulário para Filtro
linea 3  – Cambiar el alias para: widget.contatofiltro
linea 7  – Cambiar el title para: Filtrar/Buscar Contato
linea 61 – Reemplazar todo el bloque items: por el bloque abajo
items: [‘->’,{
iconCls: ‘icon-reset’,
text: ‘Reset Filtro’, // limpiar la ventana de busqueda
action: ‘reset’
},{
iconCls: ‘icon-search’,
text: ‘Filtrar’, // Haz la busqueda dos datos en lo servidor
action: ‘filtrar_busca’,
}]

03.2 – Grid – Cambios
a – En la carpeta view/contato cambiar el fichero Grid.js
linea 41 – abajo: boton de Busqueda añadir el bloque abajo:
},{
iconCls: ‘icon-search’,
text: ‘Pesquisar’, // abre el formulário de busqueda
action: ‘filtrar’

03.3 – Store-Contatos – Cambios
a – linea 4 – abajo; añadir la linea
remoteFilter:true,
b – linea 16 – abajo; añadir el bloque
actionMethods:{
read: ‘POST’
},
03.4 – Controller -Contatos – Cambios
a – linea 8 – añadir el final ,’contato.Filtro’
b – linea 15 – añadir el bloque abajo
},{
ref: ‘contatoFiltro’,
xtype: ‘contatofiltro’,
selector: ‘contatofiltro’
c – linea 36 – añadir el bloque abajo
‘contatogrid button[action=filtrar]’: { // abre el formulário de busqueda
click: this.loadFilter
},
‘contatofiltro button[action=filtrar_busca]’: { // haz la busqueda en el servidor
click: this.setFilter
},
‘contatofiltro button[action=reset]’: { // limpiar el formulário de busqueda
click: this.reset
}
d – linea 48 añadir el bloque abajo:

loadFilter: function (button) {
console.log(‘Ventana de busqueda abierta..’);
var win = Ext.widget(‘contatofiltro’);
win.show();
},

setFilter: function(btn){
var me = this;
var win = btn.up(‘contatofiltro’);
var item = win.down(‘form’).getValues(); // datos de lo formulário cargados
var store = me.getContatosStore();
console.log(item);
store.remoteFilter=false;
store.clearFilter(); // limpiar el Filter
store.remoteFilter=true;
store.getProxy().extraParams=item; // cargando datos do formulário

var obj = item // son los datos da ventana de busqueda
for (var prop in obj){ // asignar valor de las celdas do formulário para cada variable
var xname=obj.name;
var xphone=obj.phone;
var xemail=obj.email;
}
// construir el filtro con todos los datos del formulário

CÓDIGO: SELECCIONAR TODO
        store.filter([
Ext.create('Ext.util.Filter',{property: "name",value:xname, root: 'data'}),
Ext.create('Ext.util.Filter',{property: "phone",value:xphone, root: 'data'}),
Ext.create('Ext.util.Filter',{property: "email",value: xemail, root: 'data'})
]);

},
this.getContratoFiltro().close(); // formulário es cerrado después de la busqueda en el servidor
después de lo resultado haver sido exhibido en la grid, al hacer un click en el boton Pesquisar e después en Filtrar sin
ningun datos, todos los registros de la tabla contatos seran exhibidos en la grid.

reset: function (btn) {
var win = btn.up(‘contatofiltro’);
win.down(‘form’).getForm().reset();
},

03.5 – resources/css/app.css –  Cambios
a – añadir al final del fichero app.css el bloque abajo
.icon-search {
background-image: url(../images/search.gif) !important;
}

b – carpeta resources\imagens – bajar el icone de la busqueda.

03.6 – php – Listacontatos – Listado de Contados – Cambios
a – borre la liena 8 e añade el bloque abajo:

if(isset($_REQUEST[‘filter’])) { // hago la verificación se hay una petición de buqueda e hago el decode de json.
$data = json_decode($_POST[‘filter’], true);
$name=$data[0][‘value’];
$phone=$data[1][‘value’];
$email=$data[2][‘value’];

$queryString = ”
SELECT * FROM contact  WHERE
name LIKE ‘%$name%’ and
phone LIKE ‘%$phone%’  and
email LIKE ‘%$email%’
LIMIT $start,  $limit”;
}else{ // se no hay petición de busqueda, hago una listado de todo los datos da tabla contatos
$queryString = “SELECT * FROM contact LIMIT $start,  $limit”;
}

Después de todos los cambios la ventana queda como las imagens abajo.
Espero que este ejemplo sea gran ayuda a los que necesitan.
Pido disculpas por mis errores de español.

Abrazos.
Joseb -desde Brazil

ADJUNTOS
pesquisa_01.jpg

Result de la busquedas

pesquisa_00.jpg

Ventana de busqueda