Paging plugin bug

[Joel]

I posted the following fix in another forum (here) and it was suggested a post a bug report.

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 fix to this is:

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

[bwg]

The <= check causes the autoload to not appear if this.list.store.data.length is a multiple of pageSize. For example, 8 total records and pageSize = 4. I reverted back to <.

I removed the return calls and placed the alternate branch of code in an else block in order to re-enable the pullrefresh plugin. Returning false, kills the loading of any additional plugins.

        if (this.list.store && this.list.store.data.length < (this.list.store.currentPage * this.list.store.pageSize)) {
            if (!this.rendered) {
                // do nothing
            } else if (!this.autoPaging) {
                this.el.removeCls('x-loading');
                this.el.remove();
            } else {
                this.loading = false;
            }
        } else {
            if (!this.rendered) {
                this.render();
            }

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

NOTE: I did discover that the override doesn't work if a filter is applied. Using a sorter is ok.

[Vitaly2511]

Hi!
I've tested your fix, but I found a new error. When you returned from the 2-nd page to first through pullrefresh plugin, "Load More" dissapears (list.store.currentPage has wrong value in this moment. Should be 1, but it is 2)

[bwg]

@Vitaly2511

AbstractStore#load() does not reset the currentPage property. I solved the problem by customizing the refresh function:

{
    ptype: 'pullrefresh',
    refreshFn: function(callback, plugin) {
        var store = plugin.list.getStore();
        store.currentPage = 1;
        store.load(function(records, operation, success) {
            callback.call(plugin);
        });
    }
}

[Vitaly2511]

I understand your idea, but it does not work too.
When I return to first page, I don't see "Loading More..." control and top items in my list are absent (visual bug probably)

[bwg]

Ah... for my setup I had autopaging = true. When I set it to false, I can reproduce your result

[sandeep45]

I removed the code to remove the element. this solves the problem when a refresh loads only the first 25 requiring the code to make the "load more" button reappear.

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) {
                // do nothing
            } else if (!this.autoPaging) {
                this.el.removeCls('x-loading');
               //this.el.remove();
            } else {
                this.loading = false;
            }
        } else {
            if (!this.rendered) {
                this.render();
            }


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

[jthalliley]

Looks like the "Load More" button does not come back. Once you get to the end of a list, and then populate the list again (in my case, due to a search function), the "Load More" is missing.

[janelle]

The code below is working for me. I have a global variable called TotalPages that I get from my queries. If you dont want something like that, you can just check for the # results returned < page size. I have autoLoad set to false.

Ext.override(Ext.plugins.ListPagingPlugin, {
    onListUpdate : function() 
    {
        if (!this.rendered)
        {
            this.render();
            return;
        }
        
        if (this.rendered && !this.autoPaging && this.list.store && this.list.store.currentPage >= TotalPages)
        {
            // hit end of list, hide link for more results
            this.el.addCls('x-loading');
            //this.el.remove();
        }
        else if(!this.autoPaging)
        {
            this.el.appendTo(this.list.getTargetEl());
            
            // show link for more results
            this.el.removeCls('x-loading');
        }
        
        this.loading = false;
    }
});