Aprendiendo Ext JS 3

Paginado remoto en un Grid Más videos

Descripción del tema

El día de hoy voy a mostrar como podemos paginar los registros de una tabla, esta funcionalidad es muy utilizada cuando tenemos una gran cantidad de información para mostrar al usuario. El ejercicio de hoy lo puedes ver en acción, a continuación te muestro una imagen de lo que tendremos al final del tutorial.

Ejercicio final

Material de apoyo

Antes de continuar es necesario descargar el material de apoyo y copiar los archivos dentro de la carpeta “grids” que se encuentra en el servidor Web que instalamos en el primer capitulo y en el cual hemos estado trabajando.

Definir el “namespace”

Antes que cualquier otra cosa necesitamos definir el “namespace” donde estaremos trabajando.
Ext.ns('com.quizzpot.tutorial');

com.quizzpot.tutorial.PagingTutorial = {
	init: function(){		
		//code goes here
	}
}

Ext.onReady(com.quizzpot.tutorial.PagingTutorial.init,com.quizzpot.tutorial.PagingTutorial);

El paginado

Vamos a paginar la información en el servidor, éste recibirá dos parámetros, “start” y “limit”, estos parámetros son enviados automáticamente por la barra paginadora.
<?php
	header("Content-Type: text/plain"); 
	
	$start = isset($_POST['start'])?$_POST['start']:0; //posición a iniciar
	$limit = isset($_POST['limit'])?$_POST['limit']:5; //número de registros a mostrar
	
	$data = array(
			array('city'=>'Mexico city','visits'=>684,'pageVisits'=>4.11,'averageTime'=>'00:06:53'),
			array('city'=>'La Victoria','visits'=>443,'pageVisits'=>4.39,'averageTime'=>'00:07:28'),
			array('city'=>'Madrid','visits'=>380,'pageVisits'=>3.11,'averageTime'=>'00:05:22'),
			array('city'=>'Providencia','visits'=>204,'pageVisits'=>3.83,'averageTime'=>'00:08:20'),
			array('city'=>'Bogota','visits'=>204,'pageVisits'=>3.26,'averageTime'=>'00:04:57'),
			array('city'=>'Puerto Madero','visits'=>192,'pageVisits'=>3.56,'averageTime'=>'00:05:07'),
			array('city'=>'Monterrey','visits'=>174,'pageVisits'=>3.90,'averageTime'=>'00:06:06'),
			array('city'=>'Barcelona','visits'=>145,'pageVisits'=>3.28,'averageTime'=>'00:05:39'),
			array('city'=>'Caracas','visits'=>132,'pageVisits'=>4.55,'averageTime'=>'00:06:27'),
			array('city'=>'Rosario','visits'=>116,'pageVisits'=>2.44,'averageTime'=>'00:04:30'),
			array('city'=>'Oaxaca','visits'=>108,'pageVisits'=>1.73,'averageTime'=>'00:02:37'),
			array('city'=>'Buenos Aires','visits'=>100,'pageVisits'=>5.43,'averageTime'=>'00:07:37'),
			array('city'=>'Galicia','visits'=>96,'pageVisits'=>1.92,'averageTime'=>'00:04:37'),
			array('city'=>'Guadalajara','visits'=>90,'pageVisits'=>5.92,'averageTime'=>'00:03:37')
	);
	
	$paging = array(
		'success'=>true,
		'total'=>count($data), //<--- total de registros a paginar
		'data'=> array_splice($data,$start,$limit)
	);
	
	
	echo json_encode($paging);
?>
El código anterior viene con el material de apoyo, realmente no tiene nada especial únicamente recibe los parámetros y mediante la función “array_splice” regresa los registros solicitados, es importante mencionar que esta información puede provenir de una base de datos o de cualquier otro lugar, pero lo que si debes tener en cuenta es que la paginación depende totalmente del servidor y éste es el responsable de regresar la información correcta.

Crear el Store

El siguiente paso es crear un JsonStore para solicitar los registros por medio de Ajax de la siguiente manera:
var store = new Ext.data.JsonStore({
	url: 'paging.php',
	root: 'data',
	totalProperty: 'total', // <--- total de registros a paginar
	fields: ['city','visits','pageVisits','averageTime']
});

store.load();
Si has venido siguiendo el curso desde el principio el código anterior debe ser familiar, la única propiedad que quiero resaltar es “totalProperty” ya que esta propiedad define donde se encuentra (en la información que nos regresa el servidor) el total de los elementos a paginar; si no configuramos la propiedad antes mencionada, el componente no podrá calcular el número de páginas porque supone que el total es solamente los registros que se están mostrando actualmente, por lo tanto no permitirá seguir paginando la información.

Crear el Grid

Vamos a crear el Grid y asignárselo a una ventana para poder visualizarlo.
var grid = new Ext.grid.GridPanel({
	store: store,
	columns: [
		new Ext.grid.RowNumberer(),
		{header:'City', dataIndex:'city',sortable: true},
		{header:'Visits', dataIndex:'visits',sortable: true},
		{header:'Page/Visits', dataIndex:'pageVisits',sortable: true},
		{header:'Average Time', dataIndex:'averageTime', width:150,sortable: true}
	],
	border: false,
	stripeRows: true
});
		
var win = new Ext.Window({
	title: 'Grid example',
	layout: 'fit',
	width: 510,
	height:350,
	items: grid
});

win.show();
El código anterior es muy semejante al del tutorial anterior, lo único que hace es crear la tabla con las columnas necesarias y relacionar las columnas con los campos en el registro del store.

Creación de una tabla

Crear el PaggingToolbar

Vamos a crear la barra de paginación de la siguiente manera:
var pager = new Ext.PagingToolbar({
	store: store, // <--grid and PagingToolbar using same store (required)
	displayInfo: true,
	displayMsg: '{0} - {1} of {2} Cities',
	emptyMsg: 'No cities to display',
	pageSize: 5
});
He configurado las propiedades más importantes, pero la única propiedad requerida es “store” el cual debe ser el mismo que se usa para la tabla. “displayInfo” (boolean): Define si se despliega información en la parte derecha del componente sobre el estado de la paginación, por defecto es “false”. “displayMsg” (string): Especifica el mensaje que se desea desplegar cuando la propiedad anterior (“displayInfo”) es seleccionada “true”, el mensaje por defecto es “Displaying {0} - {1} of {2}”, en este caso lo hemos cambiado, es importante notar que {0} será remplazado por el parámetro “start”, {1} se remplazará por “star + limit” y {2} se remplazará por “totalProperty”. “emptyMsg” (string): Este mensaje se mostrará cuando el servidor no regrese ningún registro, si no la configuramos mostrará “No data to display” por defecto. “pageSize” (number) : Aquí definimos el número de registros por página, en este caso le asignamos cinco, pero queda a criterio del desarrollador, solamente se debe tener en cuenta que a mayor registros por página más difícil será para el usuario encontrar lo que necesita, por defecto la configuración de esta propiedad es 20.

Asignar la barra de paginación al Grid

Una vez que hemos creado nuestra barra de paginación se la podemos asignar al grid en la barra superior (tbar) o inferior (bbar), en este caso se la voy asignar en la parte inferior de la siguiente manera:
var grid = new Ext.grid.GridPanel({
	store: store, // <--El grid y PagingToolbar usan el mismo store
	columns: [
		new Ext.grid.RowNumberer(),
		{header:'City', dataIndex:'city',sortable: true},
		{header:'Visits', dataIndex:'visits',sortable: true},
		{header:'Page/Visits', dataIndex:'pageVisits',sortable: true},
		{header:'Average Time', dataIndex:'averageTime', width:150,sortable: true}
	],
	bbar: pager, // <--- Barra de paginación
	border: false,
	stripeRows: true
});

Barra de paginación

El componente “Ext.PagingToolbar” se encarga de controlar la navegación entre las páginas, cuenta con botones para avanzar/retroceder página por página o avanzar hasta el final/inicio.

Enviar parámetros extra

Si en cada petición necesitamos mandar parámetros extra al servidor, podemos definirle al “store” la propiedad “baseParams” la cual recibe un objeto de la siguiente manera:
var store = new Ext.data.JsonStore({
	url: 'paging.php',
	root: 'data',
	totalProperty: 'total',
	fields: ['city','visits','pageVisits','averageTime'],
	baseParams: {x:10,y:20} //<--- parámetros definidos
});
Al paginar la información automáticamente se mandarán los parámetros definidos en el código anterior, recordemos que estos parámetros normalmente nunca cambian. Existen situaciones en las que necesitamos enviar un parámetro “z” en algún momento en específico o necesitamos modificar este parámetro con diferentes valores, por lo tanto se los mandamos cuando hacemos el “load” del store:
//parámetros variables
store.load({params:{z:10});

Error NaN en la barra de paginación

Al parecer esto nos resuelve el problema fácilmente, pero cuando actualizamos el explorador nos damos cuenta que aparecen algunos “NaN” en la barra de paginación en lugar de aparecer los números correctos, este error es muy común y sucede porque el componente no puede calcular la página en la que se encuentra, para resolverlo solamente necesitamos enviar los parámetros “start” y “limit” junto con el parámetro “z”.
//resolviendo el NaN
store.load({params:{z:10,start:0,limit:5}});

Error NaN solucionado

Hemos resuelto el problema del NaN, pero ahora cada vez que paginamos el parámetro “z” se está perdiendo, para solucionar esto podemos utilizar un evento (“beforechange”) el cual se dispara antes de que el componente cambie de página, es decir antes de que se haga la llamada por medio de Ajax al servidor, este evento es el que necesitamos, porque aquí podemos agregar los parámetros que necesitemos, en este caso el parámetro “z”.
pager.on('beforechange',function(bar,params){
	params.z = 30;
});
Con esto es suficiente para que el parámetro “z” se envíe en cada cambio de página.

Conclusiones

En este tema vimos como mostrar mucha información en partes, este componente es muy fácil de utilizar y sobretodo muy flexible, espero el funcionamiento haya quedado claro, si tienes dudas puedes inscribirte en el foro para poder platicar mejor, de igual forma puedes seguirnos en Twitter para estar actualizado en los nuevos tutoriales que vamos sacando.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

31Comentarios

  • Avatar-3 jucahoca 09/07/2009

    Un ejemplo muy claro de uso de la paginación. Yo os hago un pequeño apunte por si a alguien le pasa que limit y start no pueden ser usados como variables en el lenguaje del servidor. Yo tuve un problema de este tipo que solucioné con paramNames (en versión 3 se usa en el store en la 2 se usaba en el pagingToolbar) este parametro de configuración te permite renombrar start y limit de forma transparente al componente para que sean enviados al servidor con otro nombre.

    • Avatar-10 jerges bello 04/08/2009

      mu bueno el post, pero tengo el siguiente problema cuando creo la variable page, y luego se la intento asginar al bbar, al parecer no carga bien el page y no manda los datos que yo le asigne, manda los predeterminado y no entiendo el porque....?

      • Avatar-4 Crysfel 04/08/2009

        Hola jerges. Te recomiendo inscribirte en el foro (http://foro.quizzpot.com) donde la comunidad podrá ayudarte mejor a resolver tu problema. saludos

        • Avatar-3 Dop 24/08/2009

          hola... por favor necesito ayuda con esto???? necesito imprimir lo registros de una tabla que tengo en mysql, como puedo hacerlo gracias....

          • Avatar-1 Crysfel 24/08/2009

            En lugar de tener la información en un Array (como en este ejemplo) has un query a la tabla donde esta la información ;)

            • Avatar-4 Dop 24/08/2009

              Gracias por responder.... mira ya estoy haciendo el query pero nose como vincularlo en la pagina php, osea podrias facilitarme un ejemplo de como podria hacerlo.... muchas gracias y disculpa las molestias

              • Avatar-1 Crysfel 24/08/2009

                Hola Dop. Te invito a registrarte en el foro (http://foro.quizzpot.com) donde podremos platicar mejor ;) además de que otros usuarios se unirán a la conversación proponiendo otras soluciones, saludos y nos vemos por ahi :D

                • Avatar-5 Dop 24/08/2009

                  LISTO VALE GRACIAS....

                  • Avatar-7 Dop 24/08/2009

                    LISTO PUBLIQUE MI TEMA DE CONVERSACION EN COMUNIDAD - COMPARTE TU PROYECTO - PROYECTO CON EXTJS, PHP Y MYSQL.

                    • Avatar-1 Elías Manchón 21/10/2009

                      Hola, He seguido el tutorial, pero no consigo entender la última parte, la de baseparams, que se intenta enviar al servidor, que significado tienen los parámetros x,y,z. A mí no me falla con NaN cuando hago las modificaciones. Gracias

                      • Avatar-8 Crysfel 22/10/2009

                        x,y,z es cualquier parámetro que necesites enviar, yo puse esos de ejemplo solamente :D

                        • Avatar-1 G 13/11/2009

                          Muy bueno el tutorial y bien explicado, me funcionó el paginado sin problemas y muy rápido, muchas gracias por compartir tus conocimientos con los demás!!!

                          • Avatar-3 THUNDERYBOY 15/04/2010

                            BUENAS, QUISERA XFA SABER QUE DATA TE PINTA EN PHP PARA ASI PODER HACER LA PAGINACION, PORQUE ESTE CODIGO LO QUIERO PASAR A ASP.

                            • Avatar-9 Miguel 18/05/2010

                              no entiendo por que mandas # pager.on('beforechange',function(bar,params){ # params.z = 30; # }); quiero mostrar solo 100 registros por pagina que debo cambiar?

                              • Avatar-9 xel 20/08/2010

                                Hola solo un apunte!! no se si sea la version de ext.. pero en la 3.2 el metodo store.load() no manda los parametros limit y strart.. para eso les recomiendo usen: store..load({params: {start: 0, limit: 13}}); saludos!!

                                • Avatar-11 Crysfel 20/08/2010

                                  No, sigue igual que siempre, automáticamente se envían los parámetros :)

                                  • Avatar-6 Hugo Uc 05/05/2011

                                    Hola estoy empezando a usar el ext con mis aplicaciones php, me gustaría saber cómo filtrar el contenido de un grid por medio de un combo, suponiendo que el combo está en la barra de herramientas del grid y el grid debe cambiar con respecto al valor seleccionado del combo. gracias

                                    • Avatar-6 manuelsempai 30/07/2011

                                      Hola, felicitaciones, está muy bueno el tuto, lo que quisiera saber es cómo hacer un scroll infinito en la tabla, he seguido el ejemplo de sencha docs, pero no me funciona, gracias por responder...

                                      • Avatar-1 Luis 05/08/2011

                                        Que tal ! El ejemplo es muy bueno y me ha funcionado sin embargo, me he dado cuenta que al dar click en el paginador (Pagina siguiente), me muestra la siguiente pagina de datos, sin embargo los datos son los mimos en cada bloque que me muestra el grid. a que se pude deber este problema, sin mas por el momento reciban un saludo...

                                        • Avatar-3 Crysfel 05/08/2011

                                          Es porque no se esta paginando la informaci´øn en el servidor.

                                          • Avatar-5 Luis 05/08/2011

                                            Muchas gracias por tu pronta respuesta, sin embargo olvide mencionar que soy nuevo en esto. Pero, tendras algún ejemplo para paginar dicha informacion? Disculpa las molestias saludos....

                                            • Avatar-3 Maverick 31/08/2011

                                              Necesito su apoyo para evitar que se pierda la "paginación" cuando realizo un filtro de datos. Por ejemplo: Recibo 50 registros luego de la búsqueda Paginación: start:0 limit: 20 total: 50 Al hacer clic en siguiente página pierde el filtro y me trae todos los registros nuevamente de la base de datos. ¿Donde se envía parámetros "post" en el Ext Js para el botón (flechita) "siguiente pagina"? Estoy trabajando con PHP y capturo el filtro en sesión. Muchas gracias por su ayuda.

                                              • Avatar-10 Crysfel 31/08/2011

                                                Necesitas usar el método "setBaseParam" para ponerle los parámetros de filtrado y entonces se envíen en cada request. Saludos

                                                • Avatar-5 Luis 18/10/2011

                                                  Hola amigos necesito ayuda, pues tengo hecho un proyecto Symfony muy extenso pero quisiera incluirle las vistas de Ext JS para darle un toque más atractivo y mejores funcionalidades.....realmente he buscado donde quiera y no he encontrado nada claro al respecto.....he logrado mostrar ventanas y una serie de cosas, o sea e integrado los archivos js de Ext en mi proyecto y todo muy bien, lo que no he logrado es como guardar mis formularios symfony con las vistas Ext JS siguiendo los patrones de Symfony.....de ante mano le doy las gracias y realmente cualquier cosa me puede ayudar....Gracias

                                                  • Avatar-12 Luis 03/11/2011

                                                    Hola amigos necesito ayuda, pues tengo hecho un proyecto Symfony muy extenso pero quisiera incluirle las vistas de Ext JS para darle un toque más atractivo y mejores funcionalidades…..realmente he buscado donde quiera y no he encontrado nada claro al respecto…..he logrado mostrar ventanas y una serie de cosas, o sea e integrado los archivos js de Ext en mi proyecto y todo muy bien, lo que no he logrado es como guardar mis formularios symfony con las vistas Ext JS siguiendo los patrones de Symfony…y cargar datos en un Grid desde mi base de datos..de ante mano le doy las gracias y realmente cualquier cosa me puede ayudar….Gracias

                                                    • Avatar-4 error900 15/12/2011

                                                      hay una forma de hacer esta paginación sin tocar el lado servidor? Solo en el Cliente

                                                      • Avatar-7 checa 03/02/2012

                                                        Se puede realizar un paginado en un grid tomando los registros de un archivo xml?... de ser asi me puedes dar algun ejemplo para ver?. Gracias.

                                                        • Avatar-7 Gonzalo Recalde 05/08/2012

                                                          hola ante todo y gracias por los tutoriales :=) te quería preguntar si sabes porque puede ser que cuando corro el programa me tira el error "p is undefinied". Estuve mirando con el firebug y descubrí que es cuando se ejecuta store.load, pero no logro encontrar el error... se me ocurrió que podía ser que en la URL de la variable store yo había puesto "url: "/directorio/pagina.php" y le saque la barra del principio... pero luego me tiro "url is undefinied"... no se que estoy haciendo mal.. Desde ya muchas gracias

                                                          • Avatar-11 Senpai 02/04/2014

                                                            Estoy usando ExtJS 4 y no me carga los datos del archivo php, me sale error, me sale este error: "Uncaught TypeError: Cannot call method 'indexOf' of undefined "

                                                          • Avatar-4 Pintor 22/04/2014

                                                            Muy bien la descripción del tema, solo tengo una pregunta, deseo realizar una paginación dinámica, es decir el valor de pageSize debe se poder ser cambiado mientras mi aplicación este corriendo, espero puedan apoyarme, gracias. . No estoy seguro si esto se puede lograr con lo que mencionan de l pase extra de parámentros con.. pager.on('beforechange',function(bar,params){ params.z = 30; });

                                                            Instructor del curso

                                                            Crysfel3

                                                            Autor: Crysfel Villa

                                                            Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                                                            Descarga Código Fuente Ver Demostración

                                                            Regístrate a este curso

                                                            Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                                                            Tendrás acceso a descargar los videos, códigos y material adicional.

                                                            Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                                                            Llevarás un registro de tu avance.