Question

I have two lists in 2 separate tabs, both hooked up to a server side database. I’m attempting to set up list paging and on one of the lists its functioning exactly as it should be. For the other list, the model and store have all the same settings as the list that pages properly but no ‘Load More…” text shows up at the bottom for this list.

With regards to the list paging plugin, both lists are basically exactly the same as each other (ie the Store, Model, ‘List’ view) but on one the paging just does not work. Does anyone have any idea what could possibly be causing this?

Editing with some more information:

I’m using Chrome to develop. Looking at the Network I seem to be getting JSON that looks right, for the one thats not working it’s returning 8 records, and the total property returned is 13 (this makes sense because I’ve got my page size set to 8).

The Store from list that does NOT work

    Ext.define("IdeaBank.store.SharedProblems", {
extend: "Ext.data.Store",
required: "IdeaBank.model.SharedProblem",
config: {
    model: "IdeaBank.model.SharedProblem",
    clearOnPageLoad: false,
    pageSize: 8,
    proxy: {
        type: 'ajax',
        api: {
            create:      "http://mywebsite.com/submitProblem.php?action=create",
            read: "http://mywebsite.com/submitProblem.php?action=read",
            update: "http://mywebsite.com/submitProblem.php?action=update",
            destroy: "http://mywebsite.com/submitProblem.php?action=delete",
        },
        reader: {
            type: 'json',
            rootProperty: "problems",
            totalProperty: "total",
        }
    },
    autoLoad: true
}
 });

The Store from list that does work

Ext.define("IdeaBank.store.SharedSolutions", {
extend: "Ext.data.Store",
required: "IdeaBank.model.SharedSolution",
config: {
    model: "IdeaBank.model.SharedSolution",
    clearOnPageLoad: false,
    proxy: {
        type: 'ajax',
        api: {
            create: "http://mywebsite.com/submitSolution.php?action=create",
            read: "http://mywebsite.com/submitSolution.php?action=read",
            update: "http://mywebsite.com/submitSolution.php?action=update",
            destroy: "http://mywebsite.com/submitSolution.php?action=delete",
        },
        reader: {
            type: 'json',
            rootProperty: "solutions",
            totalProperty: "total",
        }
    },
    pageSize: 8,
    autoLoad: true
}
});

List view from the one that does NOT work

Ext.define("IdeaBank.view.SharedProblemsList", {
extend: 'Ext.dataview.List',
alias: 'widget.sharedproblemslist',
requires: ['Ext.plugin.ListPaging'],
config: {
    autoLoad: true,
    plugins: [
        {
            xclass: 'Ext.plugin.ListPaging',
            autoPaging: true

        }
    ],
    loadingText: "Loading...",
    emptyText: [
                "</pre><div class='notes-list-empty-text'  style = 'padding: 2em;'>",
                "<p>There are no problems listed for the category you have selected.</p>",
                "</div><pre>"
                ].join(""),
    onItemDisclosure: true,
    itemTpl: [
            "</pre>",
                "<div class = 'list-item-title'><span style = 'margin-right: 5px; color: #25E014; font-size: 0.7em;'>{rating}</span> {problem}</div>",
            "<pre>"
            ].join(""),
}

});

List view from the one that does work

Ext.define("IdeaBank.view.SharedSolutionsList", {
extend: 'Ext.dataview.List',
alias: 'widget.sharedsolutionslist',
requires: ['Ext.plugin.ListPaging'],
config: {
    autoLoad: true,
    plugins: [
        {
            xclass: 'Ext.plugin.ListPaging',
            autoPaging: true
        }
    ],
    loadingText: "Loading...",
    emptyText: [
                "</pre><div class='notes-list-empty-text'  style = 'padding: 2em;'>",
                "<p>There are no published solutions for the category you have selected.<p>",
                "</div><pre>"
                ].join(""),
    onItemDisclosure: true,
    itemTpl: [
            "</pre>",
                "<div class = 'list-item-title'><span style = 'margin-right: 5px; color: #25E014; font-size: 0.7em;'>{rating}</span> {title}</div>",
            "<pre>"
            ].join(""),
}

});

Answer 1

Make sure that you implement the paging logic in your server side codes. You have to supply the functionality of sending page by page. Maybe “submitSolution.php” does not send the data partially.