PDA

View Full Version : JsonStore + Local paging



Gerardo Guerrero
9 Dec 2011, 1:41 PM
I have a grid, i tried to add paging toolbar but i got whole data, i want to paging local mode or i need to limit the data on server ?

This is my code, but i have total json rows.


/* *
Store en el que definimos de dónde se obtendran los datos,
* aquí es importante mencionar que los dataIndex deben nombrarse
* de igual manera que las variables de instancia en nuestro Bean
* construido previamente.
*/
var store = new Ext.data.Store(
{
url : 'listarBancos.action',// URL del action
reader : new Ext.data.JsonReader({
root : 'bancos', // El nombre corresponde a la variable en el
// Action que
// guarda el resultado de la consulta
idProperty : 'idBanco' // Id que filtra los resultados
// repetidos en el GRID
}, [ {
name : 'idBanco',
type : 'int'
}, 'nombre' ]), // Los nombres
// corresponden a los
// nombres de la variables de
// instancia en el BEAN
listeners : {
exception : function(proxy, type, action, o, response, args) {
Ext.MessageBox
.alert("Error",
'Error en el momento de cargar la informacion. Consulte con su administrador.');
}
},
autoLoad: {params:{start:0, limit:10}}
});


// Continuamos con el modelado de las columnas.
var bancoColMod = new Ext.grid.ColumnModel({
columns : [{
header : "Id",
dataIndex : 'idBanco',// El valor del dataIndex corresponde al
// definido en el Reader
sortable : true
}, {
header : "Nombre",
dataIndex : 'nombre',// El valor del dataIndex corresponde al
// definido en el Reader
sortable : true
}]
});


/**
* Funcion definida para borrar bancos.
*/
var removerBanco = function () {
var bancoId = gridBancos.selModel.selections.keys;
if(bancoId.length != 1){
Ext.MessageBox.alert('No hay banco seleccionado');
return;
} else {
// Petición básica
Ext.Ajax.request({
url: 'removerBancos.action',
method: 'POST',
success: successAjaxFn,
failure: failureAjaxFn,
timeout: 10000,
params:{'bancoId':bancoId},
});
}
}
/**
* Agrega un banco.
* @returns
*/
var agregaBanco = function() {
winAltaBanco.show();
frmAltaBanco.getForm().reset();
}
/**
* Se construye el grid de bancos.
*/
var gridBancos = new Ext.grid.GridPanel( {
frame : true,
title : 'Listado de Bancos',
height : 450,
width : 500,
store : store, //Store declarado previamente
colModel : bancoColMod,
// inline toolbars
tbar:[{
text:'Agregar',
tooltip:'Agrega un banco',
iconCls:'add',
handler: agregaBanco
},'-',{
text:'Eliminar',
tooltip:'Elimina el banco seleccionado',
iconCls:'remove',
handler: removerBanco,
disabled: false
}],
bbar: new Ext.PagingToolbar({
store: store,
pageSize: 10
})
});
/*
* Funcion que se ejecuta cuando hay un error al realizar la llamada Ajax del metodo eliminar.
*/
var failureAjaxFn = function(response, request) {
// Construimos el mensaje de error con datos de la petición y la respuesta
var errMessage = '<b>Error en la petición</b> ' + request.url + ' '
+ ' <b>status</b> ' + response.status + ''
+ ' <b>statusText</b> ' + response.statusText;


// Modificamos el contenido del div
Ext.MessageBox.alert(errMessage);


}


/*
* Funcion que se ejecuta cuando la llamada Ajax se realiza correctamente
*/
var successAjaxFn = function(response, request) {
store.load({
params: {
start: 0,
limit: 10
}
});
/*
* En response.responseText tenemos la respuesta del script, en este caso
* la salida del action es JSON con lo que tenemos que decodificarlo
*/
var jsonData = Ext.util.JSON.decode(response.responseText);


/*
* Al decodificar el JSON, tenemos un objeto javascript. En función del
* valor de la variable booleana 'success' (que nos indica si la acción
* que tenía que realizar el script ha tenido éxito o no) realizamos
* una u otra operación.
*/


if (true == jsonData.success) {
Ext.MessageBox.alert('Banco eliminado');
} else {
Ext.MessageBox.alert('Error al eliminar');
}
}


/**
* En cuanto se carga el DOM de la pagina hacemos el render del grid.
*/
Ext.onReady(function() {
gridBancos.render('divListaBancos');

});

mitchellsimoens
9 Dec 2011, 2:04 PM
Paging is done on the server side.