PDA

View Full Version : Paging plugin bug



Joel
26 Jun 2011, 2:41 PM
I posted the following fix in another forum (here) (http://www.sencha.com/forum/showthread.php?133550-Only-show-Paging-Toolbar-when-appropriate&p=618953#post618953) 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
27 Jun 2011, 8:02 AM
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
14 Jul 2011, 6:37 AM
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
14 Jul 2011, 9:34 PM
@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
14 Jul 2011, 11:05 PM
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
15 Jul 2011, 7:10 AM
Ah... for my setup I had autopaging = true. When I set it to false, I can reproduce your result

sandeep45
29 Sep 2011, 6:05 AM
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
7 Oct 2011, 11:01 AM
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
25 Oct 2011, 6:11 PM
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;
}
});