Only show Paging Toolbar when appropriate

[Joel]

Not sure if anyone is having the same problem but when using the Ext.plugins.ListPagingPlugin if you return a result set less than the page size the 'Load more...' still shows. Conversely, when you hit the last page the 'Load more...' doesn't disappear. The following override hides the paging plugin when not needed:

Ext.override(Ext.plugins.ListPagingPlugin, {
    onListUpdate : function() {
        if (this.list.store && this.list.store.data.length < (this.list.store.currentPage * this.list.store.pageSize)) {
            if (!this.rendered) {
                return false;
            } else if (!this.autoPaging) {
                this.el.removeCls('x-loading');
                this.el.remove();
            } else {
                this.loading = false;
            }
            return false;
        }
    
        if (!this.rendered) {
            this.render();
        }

        this.el.appendTo(this.list.getTargetEl());
        if (!this.autoPaging) {
            this.el.removeCls('x-loading');
        }
        this.loading = false;
    }
});

[tucolino]

Thanks for this. Works well for me. Have you added a bug report?

[bwg]

Worked for me as well. Definitely file a bug report with this as a patch. I'd like to nominate this post for a sticky.

My only gripe is that on the edge case where the total number of records is a multiple of the number of pages times the page size, the loading element appears one extra time because the app doesn't know yet that the server is at the end of the table.

[Joel]

Thanks, I've submitted a bug report (here). To fix the edge case (good find!) change the < to <=

[Hanni Sullivan]

@bwg & joel: Thanks! The edge case situation gave me some trouble.

[zhiivn]

I want to update the code a little bit. It will prevent the list store from calling nextPage() if the result less than the page size .

Ext.override(Ext.plugins.ListPagingPlugin, {
    onListUpdate : function() {
        if (this.list.store && this.list.store.data.length < (this.list.store.currentPage * this.list.store.pageSize)) {
            if (!this.rendered) {
                return false;
            } else if (!this.autoPaging) {
                this.el.removeCls('x-loading');
                this.el.remove();
            } else {
                this.loading = false;
            }
            return false;
        }
    
        if (!this.rendered) {
            this.render();
        }


        this.el.appendTo(this.list.getTargetEl());
        if (!this.autoPaging) {
            this.el.removeCls('x-loading');
        }
        this.loading = false;
    },
    
    onScrollEnd : function(scroller, pos) {
        if (this.list.store && this.list.store.data.length < (this.list.store.currentPage * this.list.store.pageSize)) {
            return false;
        }


        if (pos.y >= Math.abs(scroller.offsetBoundary.top)) {
            this.loading = true;
            this.list.store.nextPage();
        }
    }    
});

[flyingto]

thanks,it is very useful to me.

[slmd]

Hi,

I need help with this code. First, my whole json elements are returned plus a load more link at the bottom. Then, depending on the defined pagesize and my json length, when i click a certain number of time on the load more link it disapears wich i think is normal.
Can you help me show the correct numbers of elements that i define in the pageSize property please?

Here the code

{
    "profile": [{
        "firstname": "firstname1",
        "lastname": "lastname1",
        "age": "1"
    },{
        "firstname": "firstname2",
        "lastname": "lastname2",
        "age": "2"
    },{
        "firstname": "firstname3",
        "lastname": "lastname3",
        "age": "3"
    }]
}

Ext.setup({


    onReady : function() {


        var jsonLink = 'http://127.0.0.1/Appsfan-v2/data.json';
        var TPL = "{firstname} {lastname}";


        Ext.override(Ext.plugins.ListPagingPlugin, {


            onListUpdate : function() {
                if(this.list.store && this.list.store.data.length < (this.list.store.currentPage * this.list.store.pageSize)) {
                    console.log(this.list.store.pageSize)
                    if(!this.rendered) {
                        return false;
                    } else if(!this.autoPaging) {
                        this.el.removeCls('x-loading');
                        this.el.remove();
                    } else {
                        this.loading = false;
                    }


                    return false;
                }


                if(!this.rendered) {
                    this.render();
                }


                this.el.appendTo(this.list.getTargetEl());
                if(!this.autoPaging) {
                    this.el.removeCls('x-loading');
                }
                this.loading = false;
            },
            onScrollEnd : function(scroller, pos) {
                if(this.list.store && this.list.store.data.length < (this.list.store.currentPage * this.list.store.pageSize)) {
                    return false;
                }


                if(pos.y >= Math.abs(scroller.offsetBoundary.top)) {
                    this.loading = true;
                    this.list.store.nextPage();
                }
            }
        });
        
        var paging = new Ext.plugins.ListPagingPlugin({
            autoPaging: false,
            loadMoreText: "More...",
            pullRefreshText: "MAJ",
        })


        Ext.regModel('Profile', {
            fields : [{
                name : 'firstname',
                type : 'string'
            }, {
                name : 'lastname',
                type : 'string'
            }, {
                name : 'age',
                type : 'number'
            }]
        });


        var profileStore = new Ext.data.Store({
            model : 'Profile',
            remoteFilter: true,
            pageSize: 1,
            proxy : {
                type : 'ajax',
                url : jsonLink,
                reader : {
                    type : 'tree',
                    root : 'profile'
                }
            },
            autoLoad : true,
        });
        //console.log(profileStore);


        var myList = new Ext.List({
            itemTpl : TPL,
            store : profileStore,
            plugins : [paging]
        });


        new Ext.Panel({
            layout : 'card',
            fullscreen : true,
            items : [myList]
        });
    }
})