Sencha touch list paging

Question

I need to implement list paging for my application by using REST web services.

Here is my code

list.js

Ext.define('bluebutton.view.BlueButton.TestingList', {
    extend: 'Ext.List',
    xtype: 'testinglistcard',
    requires: [
        'Ext.field.Select',
        'Ext.field.Search',
        'bluebutton.view.BlueButton.MemberDetail',
         'Ext.plugin.ListPaging',
        'Ext.plugin.PullRefresh',
        'Ext.dataview.Override'

    ],
    config: {

        styleHtmlContent: true,
        scrollable: 'vertical',
        indexBar: true,
        singleSelect: true,
        onItemDisclosure: true,
        grouped: true,
        variableHeights : false,
          store : { xclass : 'bluebutton.store.BlueButton.Testing'},
            itemHeight :100,

        id :'testinglist',

        emptyText: '<p class="no-search-results">No member record found matching that search</p>',
        itemTpl: Ext.create(
            'Ext.XTemplate',
            '<div class="tweet-wrapper">',
                '<table>',
                    '<tr>',

                        '<td>',
                        '   <div class="tweet">',
                        '       <h3>{invoiceId}</h3>',
                        '      <h3>Name: {billNumber}</h3>',
                        '       <h3>Point Avalaible : {invoiceDate} , Last Visited : {invoiceAmount}</h3>',

                        '   </div>',
                        '</td>',
                    '</tr>',
                '</table>',
            '</div>'

        ),
    },
});

store.js

    Ext.define('bluebutton.store.BlueButton.Testing', {
    extend: "Ext.data.Store",
    requires: ['bluebutton.model.BlueButton.Testing'],
    config: {

      grouper: {
            groupFn: function (record) {
                return record.get('invoiceId')[0];
            }
        },
         model :'bluebutton.model.BlueButton.Testing',
      storeId :'testingstore',
        autoLoad: true,
          pageSize: 5,
            clearOnPageLoad: false, 
    }
});

model.js

    Ext.define('bluebutton.model.BlueButton.Testing', {
    extend: 'Ext.data.Model',
    config: {

        idProperty: 'testingModel',
        fields: [
            {  name :'invoiceId'},
            {  name: 'billNumber' },
            {  name: 'invoiceDate' },
            {  name: 'invoiceAmount' },
            {  name :'downloadLink'},

        ],

        proxy: {
            type: 'rest',
           url: 'http://localhost:8080/RESTFulExample/rest/json/metallica/invoicejsonPost',
            reader: 'json',
            actionMethods: {
                create: 'POST',
                read: 'POST',
                update: 'PUT',
                destroy: 'DELETE'
            },


                      noCache: false, // get rid of the '_dc' url parameter

//                    extraParams: {
//                    userid: "test",
//                    // add as many as you need
//                },


            reader: {
                type: 'json',
                rootProperty: 'invoice'
            },

            writer: {
                type: 'json',

            },
        }
    }
});

JsonService.java

 @GET
     @Path("invoicejson/")
     @Produces({ MediaType.APPLICATION_JSON })
     public Response getInvoicesForCustomerJson(
       @PathParam(value = "accountId") String accountId) {

      InvoiceListDto invoices = generateMockData();

      return Response.ok(invoices).build();
     }

     private InvoiceListDto generateMockData() {
      List<InvoiceDto> invoices = new ArrayList<InvoiceDto>();
      invoices.add(new InvoiceDto(1, "37897-001", new Date(), 58.92));
      invoices.add(new InvoiceDto(2, "37897-002", new Date(), 293.63));
      invoices.add(new InvoiceDto(3, "37897-003", new Date(), 173.3));
      invoices.add(new InvoiceDto(4, "37897-004", new Date(), 130.71));
      invoices.add(new InvoiceDto(5, "37897-005", new Date(), 270.71));
      invoices.add(new InvoiceDto(6, "37897-006", new Date(), 370.71));
      invoices.add(new InvoiceDto(7, "37897-007", new Date(), 570.71));
      invoices.add(new InvoiceDto(8, "37897-008", new Date(), 670.71));
      invoices.add(new InvoiceDto(9, "37897-009", new Date(), 770.71));
      invoices.add(new InvoiceDto(10, "37897-010", new Date(), 970.71));
      invoices.add(new InvoiceDto(11, "37897-011", new Date(), 3370.71));
      invoices.add(new InvoiceDto(12, "37897-012", new Date(), 1220.71));
      invoices.add(new InvoiceDto(13, "37897-013", new Date(), 1230.71));
      invoices.add(new InvoiceDto(14, "37897-014", new Date(), 140.71));
      invoices.add(new InvoiceDto(15, "37897-015", new Date(), 150.71));
      invoices.add(new InvoiceDto(16, "37897-016", new Date(), 160.71));
      invoices.add(new InvoiceDto(17, "37897-017", new Date(), 170.71));

      return new InvoiceListDto(invoices);
     }

How can we implement paging for sencha? I should implement the paging function at java or sencha side?

Answer 1

First thing first, if you want to implement pagination you don't have choice between Java & Sencha, you have to work on both to get it working. Service should be able to take params like start, page, size etc and your store/proxy should be sending correct params to services to fetch correct page of data.

There is a List Paging plugin provided in sencha, you should use it because it work easily. In addition to that you can look at this or any other listPaging tutorial : http://www.mysamplecode.com/2012/05/sencha-touch-list-load-more.html

If you don't want to use plugin and implement your way then also it is easy by marking your list as scrollable and onscrollend you just have to check the position and if it is near the end you just have to load the store and use its records to create new items to push in the list. This is a function which I use to fill my data whenever scroll ends:

onScrollEndOfList: function(scroller, x, y, store) {
    var pctScrolled = (x/scroller.maxPosition.x)*100;
    var remainingWidth = (scroller.maxPosition.x -x);
    if(!store.config.isFullyLoaded && remainingWidth < 1000/*pctScrolled > 70 && FETCH_DATA */){
        console.log("Already scrolled "+pctScrolled+", time to load more data. Width remaining="+remainingWidth);
        if(Utils.storeFullyLoaded(store)){
            console.log("Store is now fully loaded with "+(store.currentPage * store.getPageSize()));
            store.config.isFullyLoaded = true;
            return false;
        } else {
            store.nextPage({ addRecords: true });
            console.log("loading next page");
            return true;
        }
        return false;
    }
},

Here is code which finds out if we have reached till the end:

storeFullyLoaded: function(store) {
    var total = store.getTotalCount();
    return total !== null ? store.getTotalCount() <= (store.currentPage * store.getPageSize()) : false;
},

For getTotalCount to work you need to have totalProperty config on store's proxy like this:

        reader: {
            type: 'json',
            rootProperty: 'myResponse.data',
            totalProperty: 'myResponse.status.totalCount' // where to look for total?
        }

PS : It has some custom code also, which is why you should try to understand the funda than using this code as it is