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之間進行選擇，而必須同時進行兩者工作才能使其正常工作。 服務應該能夠接受參數，例如開始，頁面，大小等，並且您的商店/代理應該向服務發送正確的參數以獲取正確的數據頁面。

sencha提供了一個List Paging插件 ，您應該使用它，因為它很容易工作。 除此之外，您還可以查看此列表或任何其他列表。分頁教程： http ://www.mysamplecode.com/2012/05/sencha-touch-list-load-more.html

如果您不想使用插件並實現自己的方式，那么只需將列表標記為可滾動和滾動即可，這很容易，您只需檢查位置即可，如果位置接近末尾，則只需加載商店並使用它記錄以創建要推入列表的新項目。 每當滾動結束時，我都會使用此函數來填充數據：

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 ：它也有一些自定義代碼，這就是為什么您應該嘗試理解眼底而不是按原樣使用此代碼的原因