¡Hola!

Seguro que es muy fácil, pero no se recoger los parámetros start y limit en las cargas a BD de un grid. La idea es paginar remotamente los datos, pero necesito pasarle al servidor algún parámetro para saber en que página estoy. Imagino que dichos parámetros serán el start y limit del load (y algún otro para saber el número de página que quiero visualizar). Sería tan sencillo como pasarle los parámetros en la llamada al servlet, o algo así...

¿Alguna idea? He traceado la request en el servlet y no me llega nada útil...

Básicamente estoy creando el grid (y se ve correctamente) con:

Código: Seleccionar todo

Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: 'http://localhost:8086/examples/servlets/servlet/GetStats',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'fechaLectura',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'fechaLectura', mapping: 'ItemAttributes > fechaLectura'},
               'os', 'navegador', 'resolucion','colores'
           ])
    });

   // creamos la barra
       var pagingBar = new Ext.PagingToolbar({
        pageSize: 25,
        store: store,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display",
       
        items:[
            '-', {
            pressed: true,
            enableToggle:true,
            text: 'Show Preview',
            cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed){
                var view = grid.getView();
                view.showPreview = pressed;
                view.refresh();
            }
        }]
    });


    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "FechaLectura", width: 150, dataIndex: 'fechaLectura', sortable: true},
            {header: "os", width: 450, dataIndex: 'os', sortable: true},
            {header: "Navegador", width: 150, dataIndex: 'navegador', sortable: true},
         {header: "Resolución", width: 150, dataIndex: 'resolucion', sortable: true},
         {header: "Colores", width: 100, dataIndex: 'colores', sortable: true},
        ],
        renderTo:'example-grid',
        width:1004,
        height:400,
          // paging bar on the bottom
        bbar: pagingBar,

    });

    store.load({params:{start:0, limit:25}});
});

El componente PagingToolbar se encarga de todo. Te pasa los dos parámetros: start y limit.
Con eso ya puedes personalizar tu consulta SQL del tipo "SELECT * FROM tabla LIMIT $start,$limit".

S2!

Para mayor información...


foro/viewtopic.php?id=415

acuerdate que existe un buscar

Soy absolutamente torpe. Ya recibo el parámetro start e init... Tengo una tabla de 2200 registros, que quiero paginar de 10 en 10. El grid llama al servlet, que recibe los parámetros start e init y devuelve los primeros 10 registros...

El problema ahora es que no sé definir el total de registros, es decir, el grid cree que la tabla solo tiene 10 registros (porque de hecho es lo que devuelve) y no se activa la paginación. ¿Debo pasarle el total de registros de alguna manera? (seguro que sí)

Uso un servlet en la parte servidora y un HTML/JS en la parte cliente. Nada de PHP ni JSON.

Os paso el código, copiado del de GarraS

Código: Seleccionar todo

/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){

   Ext.QuickTips.init();
   
   var bd = Ext.getBody();
   
   bd.createChild({tag: 'h2', html: 'Grid con Paginación usando PHP, MySQL y JSON'});

   // create the Data Store


    var store = new Ext.data.Store({
        // load using HTTP
      proxy: new Ext.data.HttpProxy({
            method: 'GET',
            url: 'http://192.168.10.102:8086/examples/servlets/servlet/GetStats'      
        }),
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'fechaLectura',
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'fechaLectura', mapping: 'ItemAttributes > fechaLectura'},
               'os', 'navegador', 'resolucion','colores'
           ])
    });

   var grid = new Ext.grid.GridPanel({
      store: store,
      columns: [
         {
            header: "fechaLectura",
            width: 100,
            align: 'right',
            sortable: true,
            dataIndex: 'fechaLectura'
         }, {
            header: "fechaLectura",
            width: 200,
            sortable: true,
            dataIndex: 'fechaLectura'
         }, {
            header: "fechaLectura",
            width: 200,
            sortable: true,
            dataIndex: 'fechaLectura'
         }, {
            header: "fechaLectura",
            width: 200,
            sortable: true,
            dataIndex: 'fechaLectura'
         }, {
            header: "fechaLectura",
            width: 200,
            sortable: true,
            dataIndex: 'fechaLectura'
         }       
      ],
      viewConfig: {
         forceFit: true
      },
      sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
      bbar: new Ext.PagingToolbar({
         pageSize: 10,
         store: store,
         displayInfo: true
      }),
      width:500,
      height:270,
   });
      
   grid.render(bd);
   
   store.load({
      params: {
         start: 0,
         limit: 10
      }         
   });
   

});

La select que se devuelve es SELECT fechaLectura, com_direccion, com_poblacion, idcom com_cargo FROM web LIMIT 0,10

Y se devuelven 10 registros, por supuesto, en un XML

¿Cómo informo al grid de que en realidad se trata de una tabla de 2.200 registros? ¿Puedo informar un campo en el XML con el total de registros? ¿Puedo hacerlo manualmente?

Gracias y perdón por la torpeza. He intentado poner totalProperty en todos los lados, pero no parece tener efecto.

En la barra de paginación aparece Displaying 1 - 10 of 10 en vez de 1-10 of 2200

totalProperty ... para utilizar eso debes poner en tu ArrayJson el total de valores... un count o un size de una lista...no se si me explico

Sí, me imagino que será poniendo un valor a totalProperty... pero ¿dónde la pongo? ¿en la conexión a la BD, en el objeto de la barra de paginación, en el grid...? ¿Dónde exactamente? He probado a poner totalProperty : 2200 en casi todos los sitios, pero no parece tener ningún efecto...

En el XMLReader

Código: Seleccionar todo

reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
              totalRecords: 'totalFilas',
               record: 'Item',
               id: 'fechaLectura',
           },

Igual como mandas el fechaLectura, también devuelves el totalFilas.

El XML debe devolver algo parecido a:

Código: Seleccionar todo

<?xml version="1.0" encoding="UTF-8"?>
<dataset>
<totalFilas>2200</totalFilas>
<Item>
<campo1>mi valor</campo1>
<campo2>mi valor 2</campo2>
</Item>
</dataset>

Tienes más información en la API.
http://extjs.com/deploy/dev/docs/?class ... .XmlReader

Perfecto. ¿Y cómo paso el valor del XML al ExtJS? ¿Tiene que tener algún nombre en concreto? ¿Dónde "mapeo" el valor? Y muchas gracias Iván, sé que no debe ser complicado...

Ups, ya lo he visto, en el mensaje de arriba. Lo siento. Lo pruebo mañana y os cuento.

¡Gracias!

Estimado Iván:

Permítame decirle que lo que Ud. afirma respecto a que el PagingToolBar "se encarga de todo" no es tan efectivo dado que cuando intento cambiar de página no realiza ninguna acción, he intentado sobreescribir la función para poder "tomar el control" pero tampoco he logrado nada. Si Ud. o alguien me pudiera ayudar con el asunto se lo agradecería.