PagingToolbar

A special Toolbar class, which, when attached to a Store, which has been configured to be paged, controls the loading of that store to page through the data set.

new Grid({
     bbar : {
         type  : 'pagingtoolbar'
     }
});

Paging toolbar

//<code-header>
fiddle.title = 'Paging toolbar';
//</code-header>
const
    rowCount = 250,
    pageSize = 25;

let data = [];

AjaxHelper.mockUrl('/pagedMockUrl', (url, params) => {
    const
        page     = parseInt(params.page, 10),
        pageSize = parseInt(params.pageSize, 10),
        startIdx = (page - 1) * pageSize;

    if (data.length !== rowCount) {
        data = DataGenerator.generateData(
            rowCount,
            null,
            1
        );
    }

    let returnedData = data.slice();

    // Filter the data if filter parameter is passed
    if (params.filter) {
        returnedData = returnedData.filter(
            CollectionFilter.generateFiltersFunction(
                JSON.parse(params.filter).map(f => {
                    f.property = f.field;
                    return new CollectionFilter(f);
                })
            )
        );
    }

    // Sort the data if sort parameter is passed
    if (params.sort) {
        returnedData.sort(store.createSorterFn(JSON.parse(params.sort)));
    }

    return {
        responseText : JSON.stringify({
            success : true,
            total   : returnedData.length,
            data    : returnedData.slice(startIdx, startIdx + pageSize)
        })
    };
});

const store = new AjaxStore({
    modelClass      : GridRowModel,
    readUrl         : '/pagedMockUrl',
    pageParamName   : 'page',
    sortParamName   : 'sort',
    filterParamName : 'filter',
    pageSize,
    autoLoad        : true
});

if (window.Grid) {
    const grid = new Grid({
        height   : '30em',
        appendTo : targetElement,
        columns  : [
            {
                text  : 'First name',
                field : 'firstName',
                flex  : 1
            },
            {
                text  : 'Surname',
                field : 'surName',
                flex  : 1
            },
            {
                text  : 'Rank',
                field : 'rank',
                flex  : 1,
                type  : 'number'
            },
            {
                text  : 'Percent',
                field : 'percent',
                width : 150,
                type  : 'percent'
            }
        ],

        store,

        bbar : {
            type  : 'pagingtoolbar',
            items : {
                click : {
                    type   : 'button',
                    text   : 'Click me',
                    weight : 175 // Add after last item
                }
            }
        }
    });
}
// Use a List in TaskBoard, it is not built on Grid
else {
    const panel = new Panel({
        height     : '30em',
        appendTo   : targetElement,
        scrollable : true,
        items      : {
            list : {
                type         : 'list',
                store,
                displayField : 'name'
            }
        },
        bbar : {
            type  : 'pagingtoolbar',
            store,
            items : {
                click : {
                    type   : 'button',
                    text   : 'Click me',
                    weight : 175 // Add after last item
                }
            }
        }
    });
}

Default toolbar items

The toolbar provides some default buttons and other items as described below:

Reference	Weight	Description
`firstPageButton`	100	Go to first page
`previousPageButton`	110	Go to previous page
`pageNumber`	120	TextCurrent page number
`pageCount`	130	Label showing number of pages
`nextPageButton`	140	Go to next page
`lastPageButton`	150	Go to last page
`reloadButton`	160	Reload data
`dataSummary`	170	Summary text

Customizing the toolbar items

The toolbar items can be customized, existing items can be changed or removed, and new items can be added. This is handled using the items config.

Adding additional buttons or widgets to the paging toolbar can be done like so:

bbar : {
    type  : 'pagingtoolbar',
    items : {
        click : {
            type : 'button',
            text : 'Click me',
            weight : 175 // Add after last item
        }
    }
}

Configs

Common

listenersEvents

Other

store: Store | String

The Store that this PagingToolbar is to control. If set to a string value, that string value should represent the property name of the Store's reference on this toolbar's parent component. By default, the toolbar will control the Store found at the parent components 'store' property.

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

columnWidget

defaultFocusContainer

detectCSSCompatibilityIssuesWidget

enableReorderingToolbar

inputFieldAlignContainer

labelPositionToolbar

overflowToolbar

renditionContainer

rtlRTL

spanWidget