When adding the pagingtoolbar property I get error this.store.loadPage is not a function. I use Bryntum version 5.0.7
bbar : {
type : 'pagingtoolbar'
}
const me = this;
me.grid = new TreeGrid({
appendTo : 'container',
height : 800,
responsiveLevels : {
small : 400,
medium : 800,
large : '*'
},
features : {
filter : true,
stripe : true,
search : true,
rowCopyPaste : false,
cellEdit : false
},
loadMask : 'Loading tree data...',
columns: [
{ text: 'ID', field : 'id', hidden: true },
{ text: this.translate.instant("dolphinFiles.name"), field : 'nombre', width : 205, type : 'tree'}
],
tbar : [
{
type : 'number',
ref : 'fieldPageSize',
placeholder : 'Page size',
label : 'Page size',
tooltip : 'Enter number of records in each page (10 - 100) and press Apply',
value : this.pageSize,
width : '11em',
min : this.minCount,
max : this.maxCount,
step : 5
},
{
type : 'number',
ref : 'fieldRowCount',
placeholder : 'Total records',
label : 'Records',
tooltip : 'Enter number of records to generate (10 - 1000) and press Apply',
value : this.rowCount,
width : '11em',
min : this.minCount,
max : this.maxCount,
step : 10
},
{
type : 'button',
text : 'Apply',
ref : 'buttonApply',
icon : 'b-fa-check',
tooltip : 'Apply page size and number of records to data loader',
onClick() {
this.rowCount = me.grid.widgetMap.fieldRowCount.value;
this.pageSize = me.grid.store.pageSize = me.grid.widgetMap.fieldPageSize.value;
this.currentPage = me.grid.store.currentPage = me.grid.store.currentPage ? Math.min(me.grid.store.currentPage, Math.floor((this.rowCount + this.pageSize - 1) / this.pageSize)) : 1;
me.grid.store.loadPage(this.currentPage, { rows : this.rowCount });
}
},
],
bbar : {
type : 'pagingtoolbar'
}
});
me.search = me.grid.widgetMap.searchField;
me.previousBtn = me.grid.widgetMap.prevBtn;
me.nextBtn = me.grid.widgetMap.nextBt;
me.grid.store.data = data;
From the front from where?
Pagination requests pages from somewhere and loads one page at a time into the Store.
You could use https://www.bryntum.com/products/grid/docs/api/Core/helper/AjaxHelper#function-mockUrl-static
Which is what this examples shows: https://bryntum.com/products/grid/examples/paged/