Sencha list paging plugin

Question

I am trying to use the sencha touch listpaging plugin. But there is almost no good (or bad) documentation on how to use it, and I'm confused.

When I activate the plugin in my list

this.myList = new Ext.List({
  store: this.myStore,
  plugins: [{
    ptype: 'listpaging',
    autoPaging: false
  }],
  itemTpl: '...'
});

Added the text "Download more" and the boot image to the end of the list.

But I don’t know how to set up my store so that this plugin can load more data.

App.regStore('MyStore', {
 model: 'myModel',
 proxy: {
    type: 'ajax',
    url: 'http://mydomain.com/json?howmany=10&page=1',
    reader: {
        type: 'json',
        root: 'results'
    }
  }
});

App.stores.myStore = Ext.StoreMgr.get('MyStore');

How can I set up my store, so when I click "Download more", the store displays page 2 and automatically adds them to the list?

Answer 1

, . pageSize , clearOnPageLoad, . :

Ext.regStore('publicresources', {

model: 'PublicResource',
autoLoad:false,
remoteFilter:true,
sortOnFilter:true,
    pageSize: 15,
    clearOnPageLoad: false, 
sorters: [
    {
        property : 'distance',
        direction: 'ASC'
    }
]

});

, , :

• "",
• , , .
• , . 1-

!

Answer 2

ListPage SenchaTouch 2 " ", .

, ( pageSize clearOnPageLoad), , , Senchatouch 2. SenchaTouch 1.x . SenchaTouch 2 config:

Ext.define('MessagingApp.store.MessageThreads', {
    extend  : 'Ext.data.Store',
    requires: ['MessagingApp.model.MessageThread'],

    config:
    {
        model: 'MessagingApp.model.MessageThread',

        autoLoad: false,
        clearOnPageLoad: false,  // This is true by default
        pageSize: 10,            // This needs to be set for paging

        proxy: {
            type: 'jsonp',
            pageParam: 'currentPage',
            limitParam: 'pageSize',
            url: APIURL + '/message-app-service/GetMessageThreads',
            reader: {
                type: 'json',
                rootProperty: 'Data'
            }
        }
    }
});

, , "load more" "no more records" :

{
    xtype:'dataview',
    store:'MessageThreads',
    id:'threadList',
    itemTpl:Ext.create('Ext.XTemplate',
        '<!-- template markup goes here -->',
        {
            //custom helper functions here
        }
    ),
    plugins:[
        {
            xclass:'Ext.plugin.ListPaging',
            autoPaging: true,

            // These override the text; use CSS for styling
            loadMoreText: 'Loading...',
            noMoreRecordsText: 'All messages loaded'
        }
    ]
}

, , - , , , , . , " " ( №1 ). , init load , , :

Ext.define('MessagingApp.controller.Messages',
{
    extend: 'Ext.app.Controller',

    config:
    {
        views: [
            'MessageThreads',
            // Other views referenced by this controller
        ],

        stores: [
            'MessageThreads'
        ],

        refs:
        {
            // References to UI elements by selector...
        }
    },

    init: function() {
        // Other internal initialisation...

        this.control(
        {
            // Selector-object pairs...
        });

        // Provide a means to intercept loads of each page of records
        var threadStore = Ext.getStore('MessageThreads');
        threadStore.addBeforeListener('load', this.checkForThreadListEnd, this);
    },

    // Remaining controller functions...

});

, , . , "" . , totalCount :

checkForThreadListEnd: function(store, records, isSuccessful) {
    var pageSize = store.getPageSize();
    var pageIndex = store.currentPage - 1;    // Page numbers start at 1

    if(isSuccessful && records.length < pageSize)
    {
        //Set count to disable 'loading' message
        var totalRecords = pageIndex * pageSize + records.length;
        store.setTotalCount(totalRecords);
    }
    else
        store.setTotalCount(null);
},

// Other controller functions...

"before", , , "load more" "no more records" . , "no more records" , CSS.

, .

Answer 3

, .

http://www.sencha.com/forum/showthread.php?105193-Store-pageSize

Answer 4

"load more vs. no more records" -

( Sencha Touch MVC PhoneGap), ,

, - ,

1), , , ,

2), < , 1 ( " " )

    //return model instances in a result set
    operation.resultSet = new Ext.data.ResultSet({
        records: contacts,
        //total  : contacts.length,
        total  : contacts.length === operation._limit ? (operation._limit * operation._page +1) : 1,
        loaded : true
    });
    //announce success
    operation.setSuccessful();
    operation.setCompleted();
    //finish with callback
    if (typeof callback == "function") {
        callback.call(scope || thisProxy, operation);
    }

Answer 5

, ..

If your server returns totalCount and you want to set it, you can use totalProperty in the reader

reader: {
            type: 'json',
            rootProperty: 'results',
            totalProperty: 'resultCount'
        }