docs - extjs 4 panel
paginación en la cuadrícula extjs 4 no está funcionando (3)
Los elementos por página se han establecido en 10 y también he creado la barra de herramientas de paginación como x tipo en elementos acoplados en el extremo frontal.
No hay parámetros de inicio y límite en la consulta de Oracle. ¿Cómo hago para recuperar los registros de la base de datos Oracle?
¡Por favor ayuda!
Aquí está mi código:
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath(''Ext.ux'', ''ux/'');
Ext.require([''*'']);
Ext.onReady(function()
{
var itemsPerPage = 10;
var store=Ext.create(''Ext.data.Store'',
{
autoload: true,
autosync: true,
pageSize: itemsPerPage,
data: [],
fields:
[
{name: ''firstname'', id:''firstname''},
{name: ''email'', id:''email''},
{name: ''mobileno'', id:''mobileno''}
]
});
var panel = Ext.create(''Ext.grid.Panel'',
{
layout: ''fit'',
store:store,
id: ''grid1'',
dockedItems:
[
{
xtype: ''pagingtoolbar'',
store:store,
dock:''bottom'',
displayInfo:true
}
],
renderTo: Ext.getBody(),
columns:
[
{
header:''Firstname'',
id:''firstname'',
dataIndex:''firstname'',
//autoSizeColumn : true,
flex: 1,
editor: {
xtype: ''textarea''
}
},
{
header:''Action'',
id:''action'',
align:''center'',
xtype:''actioncolumn'',
autoSizeColumn : true,
//flex: 1,
sortable:false,
items:
[
{
icon:''images/view_icon.gif'',
tooltip:''View'',
handler: function(grid,rowIndex,colIndex)
{
var rec= grid.getStore().getAt(rowIndex);
var email=rec.get(''email'');
location.href="RegistrationFormGridView.jsp?email="+email;
}
},
{
icon:''images/edit_icon.gif'',
tooltip:''Edit'',
handler: function(grid,rowIndex,colIndex,e)
{
var rec= grid.getStore().getAt(rowIndex);
var email = rec.get(''email'');
location.href="GetRecords.jsp?email="+email;
// alert(JSON.stringify(rec.get(''email'')));
// window.location=''GetFormData?key1=''+email;
}
},
{
icon:''images/icons/cancel.png'',
tooltip:''Delete'',
handler: function(grid,rowIndex,colIndex)
{
var rec= grid.getStore().getAt(rowIndex);
var email = rec.get(''email'');
Ext.Ajax.request(
{
url:''./deleteRecords'',
params:{email:email},
method:''GET'',
success: function(response)
{
Ext.Msg.alert("successfully deleted" +" " + response.status);
window.location.reload();
},
failure: function(response)
{
Ext.Msg.alert("failed" + response.status);
}
});
}
}
]
}
],
listeners:
{
afterrender:function()
{
Ext.Ajax.request(
{
params:{email:email},
url:''./RetrieveRecords'',
success: function(response)
{
data = [];
data = Ext.JSON.decode(response.responseText);
Ext.getCmp(''grid1'').getStore().loadData(data);
},
failure: function(response)
{
}
});
}
}
});
});
Debe gestionar la paginación desde el servidor, Ext js solo le proporciona los elementos necesarios para la paginación.
por cada clic en siguiente o anterior, Ext js envía automáticamente dos parámetros start y limit donde start es el siguiente índice de la última repetición de la página y limit (itemsPerPage) es su número de registros por página.
por ejemplo, supongamos que tiene 100 registros y ha implementado la paginación en la cuadrícula y los elementos por página son 10.
Inicialmente start = 0 y limit será 10, si hace clic en next y start será 11 y el límite será 10 ... de manera similar si hace clic en start anterior será 0 y el límite será 10
Usando estos dos parámetros, debe enmarcar su consulta para cargar registros y enviar los registros como respuesta.
Lo que también puede hacer es buscar todos los registros de la base de datos y ponerlos en una matriz. Después de eso en la matriz puede establecer el punto de inicio y final para recuperar los registros.
Tiene que manejar la paginación en el lado del servidor, lo que puede hacer es enviar dos parámetros Página y RecsPerPage. Luego, en el servidor Sql puede establecer el primer registro y el último registro en función de estos dos parámetros.
@FirstRec = (@Page - 1) * @RecsPerPage); @LastRec = (@Page * @RecsPerPage + 1);
entonces su consulta SQL será como =
select top (@LastRec -1)* from
( select cast(ROW_NUMBER() OVER(ORDER BY ID) as numeric)
ROWID, * from TempResult
WHERE ROWID > @FirstRec AND ROWID < @LastRec
order by temp.ID desc
) temp
TempResult será toda tu tabla de datos