sencha liste de plugin de pagination

J'ai eu un problème similaire avec le ListPaging plugin dans SenchaTouch 2, et a réussi à se sortir de la "charger plus" message du comportement lors de la fin de l'ensemble de données est atteint.

Cela s'appuie sur ce que John Gordon a (concernant la spécification de la pageSize et clearOnPageLoad les options de configuration), puisque ces propriétés semblent être les mêmes dans Senchatouch 2. Je n'ai pas regardé SenchaTouch 1.x dans le détail. Dans SenchaTouch 2, toutes les options de configuration doit être défini dans un config propriété:

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

Dans la vue, où l'on précise les plugins, nous pouvons remplacer la "charger plus" et " plus aucun enregistrement de messages:

{
    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'
        }
    ]
}

Le problème est que, bien que notre service web renvoie un tableau d'enregistrements pour une page en particulier, il n'existe pas d'ensemble nombre total de propriété, ce qui est nécessaire pour le plugin pour déterminer quand tous les enregistrements ont été chargés. Donc comme il est, le "Charger plus" message restera (question n ° 1 dans la solution retenue). Ainsi, dans le init fonction de notre commande, nous devons associer un gestionnaire d'événement pour la load événement sur le magasin de crochet à quand une nouvelle page de données est reçu:

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...

});

Dans le gestionnaire, nous nous rendons compte que nous avons atteint la fin de la série de données lorsque le nombre d'enregistrements retournés est inférieure à la taille de la page. Si le total record de nombre est un multiple de la taille de la page, la dernière page " aura un tableau vide. Une fois à la fin de la série de données a été identifié, nous mettons à jour le totalCount config propriété de la boutique:

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...

Parce que c'est un "avant" gestionnaire d'événement, cette propriété sera essentiellement mis à jour avant que le plugin décide d'afficher le "charger plus" ou " plus aucun enregistrement de messages. Malheureusement, le cadre ne fournit pas un moyen de cacher les 'dossiers' message, si cela devait être fait via CSS.

Espère que cette aide.

OriginalL'auteur d_mcg

En ce qui concerne la "charge de plus contre pas plus de dossiers" message -

Si vous écrivez un proxy personnalisé (exemple ici Un Sencha Touch MVC de l'application avec PhoneGap), vous définissez le nombre total d'enregistrements dans le retour de l'Opération.

Si le nombre total d'enregistrements ne sont pas encore connues, vous pouvez faire quelque chose comme ci-dessous, où,

1) si vous êtes de retour à la demande de la limite de dossiers, définir le total à quelque chose de plus grand que les enregistrements le magasin va maintenant

2) en cas de retour de < la demande de limite de dossiers, définir le total à 1 (à force de le "plus aucun enregistrement de message")

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

OriginalL'auteur Matt