Sencha觸摸列表分頁

Question

我需要使用REST Web服務爲我的應用程序實現列表分頁。

這裏是我的代碼

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); 
    } 

我們如何實現sencha的分頁？我應該在java或sencha端實現分頁功能？

Answer 1

首先，如果你想實現分頁，你沒有Java & Sencha之間的選擇，你必須努力工作。服務應該能夠像啓動，頁面，大小等參數，你的商店/代理應該發送正確的參數服務來獲取正確的頁面的數據。

有一個List Paging plugin提供sencha，你應該使用它，因爲它很容易工作。此外，你可以看看這個或任何其他listPaging教程：http://www.mysamplecode.com/2012/05/sencha-touch-list-load-more.html

如果你不想使用插件和實現方式，然後也很容易通過標記列表可滾動和onscrollend你只需要檢查位置，如果它接近尾聲，您只需加載商店並使用其記錄創建新項目以推入列表。這是我使用時滾動結束，以填補我的數據的功能：

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; 
    } 
}, 

這裏是一個發現，如果我們已經達到至死不渝代碼：

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

對於getTotalCount工作，你需要對商店的代理totalProperty配置是這樣的：

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

PS：它也有一些自定義代碼，這就是爲什麼你應該嘗試瞭解基礎比使用此代碼，因爲它是