For a recent project I needed a list that displayed how many items were in a “page” and how many items there were in total. This way as the user scrolled they could visually keep track of where they were and how far they had to go.

This is common practice in desktop web sites with the pager links and information at the top and/or bottom of the page but in mobile we generally present a vertically scrolling list to save space and because it is easier for a touch device to drag the screen up or down than to tap a next/prev link.

Here is a screen capture of the finished product:
List screen capture

Initially I expected the solution to involve inserting “pseudo” elements into the list between the pages to contain the item counts and total or to avoid the Ext.dataview.List all together and build the layout template from scratch with raw DataItem’s. I also artificially restricted myself to the useSimpleItems=true list configuration as our dataset could be quite large and the Sencha Touch documentation warns about potential performance problems.

The other problem I was struggling with even if I could insert extra items into the list was how to not break the relationship to the store the list was bound to. In addition sorting had to be considered as that would change the item indexes and their relationship to the DOM elements.

While I was digging around in the Sencha source code to solve these problems it dawned on me I could do this with grouping! So after some trial and error a customer grouper function was all that was needed.

Here is the code you would put in the store the list is bound to:

grouper: {
    groupFn: function (record) {
        var store = record.stores[0],
            pageSize = store.getPageSize(),
            cachedCount = store.getAllCount(),
            totalCount = store.getTotalCount(),
            index = store.indexOf(record) + 1,
            totalPages = Math.ceil(cachedCount / pageSize),
            pageIndex = 0,
            lower,
            upper; 

        for (pageIndex = 0; pageIndex <= totalPages; pageIndex++) {
            lower = (pageIndex * pageSize) + 1;
            upper = (pageIndex * pageSize) + pageSize;
            if (upper > cachedCount) { upper = cachedCount; }
            if (index >= lower && index <= upper) {
               return "Properties " + lower + " - " + upper + " of " + totalCount;
            }
        }
    }
}

While the code is not that elegant and there is probably a small performance impact the advantage of this simple solution is it satisfied the visual requirements and does not require a departure from the standard well known Sencha Touch list component.

Store code available from our GitHub repository.