paginar la grid para que me muestre solo 50
hola buenas tardes… estoy incursionando en el mundo de Ext y ya me he creado mi primera grid que se conecta con una BD sql y extrae la información y la carga … ahora el problema es que no encuentro como paginar la grid para que me muestre solo 50 filas… y asi susesibamente la información a cargar en muy grande y me es importante poder distribuir de 50 en 50 estamos hablando miles de miles de infomación y cada dia va creciendo si me podes ayudar de antemano le agradezco por su ayuda… pues me he registrado 6 beses en el sitio oficial http://www.extjses.com/foros.html y no resivo el Email para activar la cuenta… saludos
gracias
acá les pongo mi Código y espero les sirva como ejemplo (No esta terminado todavía quiero hacerle muchas por ejemplo Filtrado de usuario etc..cosas pero dependo de la paginación)
este es mi fichero.ui.js
MyPanelUi = Ext.extend(Ext.Panel, {
title: 'Trazas',
width: 800,
height: 300,
maskDisabled: false,
initComponent: function() {
this.items = [
{
xtype: 'grid',
store: 'trazas',
enableColumnHide: false,
hideBorders: true,
border: false,
collapseFirst: false,
footer: true,
shadowOffset: 10,
columnLines: true,
enableColumnMove: false,
enableHdMenu: false,
width: 800,
height: 274,
autoShow: true,
buttonAlign: 'center',
hideCollapseTool: true,
loadMask: true,
ref: 'grid',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'usuario',
header: 'Usuario',
sortable: true,
width: 80
},
{
xtype: 'gridcolumn',
dataIndex: 'ip',
header: 'IP Origen',
sortable: true,
width: 80,
align: 'right'
},
{
xtype: 'gridcolumn',
dataIndex: 'fecha',
header: 'Fecha',
sortable: true,
width: 80
},
{
xtype: 'gridcolumn',
dataIndex: 'hora',
header: 'Hora',
sortable: true,
width: 60
},
{
xtype: 'gridcolumn',
dataIndex: 'url',
header: 'URL',
sortable: true,
width: 355
},
{
xtype: 'gridcolumn',
dataIndex: 'tamanno',
header: 'Longitud',
sortable: true,
width: 60
},
{
xtype: 'gridcolumn',
dataIndex: 'acceso',
header: 'Acceso',
sortable: true,
width: 60
}
],
fbar: new Ext.PagingToolbar({
xtype: 'paging',
store: 'trazas',
forceLayout: true,
hideBorders: true,
displayInfo: true,
pageSize: 50,
firstText: 'Primera Pagina',
lastText: 'Ultima Pagina',
nextText: 'Siguiente Pagina',
emptyMsg: 'No hay Datos para Mostrar',
afterPageText: 'de {0}',
beforePageText: 'Pagina',
displayMsg: 'Mostrando {0} - {1} de {2}'
})
}
];
MyPanelUi.superclass.initComponent.call(this);
}
});
MyPanel = Ext.extend(MyPanelUi, {
initComponent: function() {
MyPanel.superclass.initComponent.call(this);
}
});
trazas = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
trazas.superclass.constructor.call(this, Ext.apply({
storeId: 'trazas',
root: 'root',
url: 'php/json.php',
autoLoad: true,
fields: [
{
name: 'usuario'
},
{
name: 'ip'
},
{
name: 'fecha'
},
{
name: 'hora'
},
{
name: 'url'
},
{
name: 'tamanno'
},
{
name: 'acceso'
}
]
}, cfg));
}
});
new trazas();
Ext.onReady(function() {
Ext.QuickTips.init();
var cmp1 = new MyPanel({
renderTo: Ext.getBody()
});
cmp1.show();
});
y este en mi fichero.php que es que manda los datos para la grig probé con el Comando LIMIT 0, 50 y si la grid me muestra 50 nada más pero cuando le doy siguiente a la grid me muestra la misma información...
get_store();
break;
}
}
else
{
$cls->get_store();
}
class test
{
public function __construct()
{
}
public function __destruct()
{
}
public function get_store()
{
$sql = "SELECT trz_trazas.usuario, trz_trazas.ip, trz_trazas.fecha, trz_trazas.hora, trz_trazas.url, trz_trazas.tamanno, trz_trazas.acceso FROM trz_trazas";
$link = Conectar();
$rs = mysql_query( $sql, $link );
$row = mysql_fetch_assoc( $rs );
$total = mysql_num_rows( $rs );
$i = 0;
$response->success = true;
$response->records = $total;
do
{
$response->root[$i] = $row;
$i++;
} while ( $row = mysql_fetch_assoc( $rs ) );
echo json_encode( $response );
}
}
?>
Te respondi en esta otra pregunta:
http://foro.quizzpot.com/discussion/comment/3151/#Comment_3151
Please no dupliques la misma pregunta para evitar estos inconvenientes ;-)
Saludos
prueba agregándole a la definición de tu jsonstore el siguiente parámetro:
baseParams:{start:0,limit:50}
el problema es que la paginacion la debes controlar desde tu php por lo que debes capturar los valores de start y limit y devolver los resultados segun la configuracion de tu pagesize, ejemplo:
espero te sirva
saludos....
siii tu ejemplo me es de mucha ayuda... pero cuando intento modidificarlo a como usted me dice en el ejemplo me carga la grid pero no me muestra la información estuve indagando en internet y me encontré con que en Código de la ui.js debo tener este pequeño código al agregarlo pues no me muestra la Grid
store.load ({params:{start:0, limit:50}});
un millón de gracias por su dedicación... mientras sigo investigando...
debería ir acá
fbar: new Ext.PagingToolbar({
xtype: 'paging',
store: 'trazas',
forceLayout: true,
hideBorders: true,
displayInfo: true,
pageSize: 50,
firstText: 'Primera Pagina',
lastText: 'Ultima Pagina',
nextText: 'Siguiente Pagina',
emptyMsg: 'No hay Datos para Mostrar',
afterPageText: 'de {0}',
beforePageText: 'Pagina',
displayMsg: 'Mostrando {0} - {1} de {2}'
})
}
];
MyPanelUi.superclass.initComponent.call(this);
}
////*************** Acá ************* //////
--------> store.load({params:{start:0, limit:50}});
});
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.