javascript - Sencha 触摸列表分页

Question

我需要使用 REST Web 服务为我的应用程序实现列表分页。

这是我的代码

列表.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, 
    }
});

模型.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:它还有一些自定义代码，这就是为什么您应该尝试理解基础而不是直接使用此代码