PDA

View Full Version : [ListPagingPlugin] How to keep the focus on the current item?



Martin1982
14 Sep 2011, 12:05 AM
I am using the list paging plugin to load more items when the user reaches the bottom of a list. The only problem I am experiencing is that when the new items are loaded the focus is still at the bottom of the screen and not at the item the user was at (so the top of the new data).

This is what I have for the plugin in my xtype: 'list':



plugins: [{
ptype: 'listpaging',
autoPaging: true,
loadMoreText: 'Searching for more items..'
}]


Does anyone know how to keep focus on the item the user was at or at least the first new item instead of the last?

mitchellsimoens
14 Sep 2011, 5:14 AM
You could listen to the beforeselect on the List and return false if it's on the plugin div

Martin1982
14 Sep 2011, 7:12 AM
Hi Mitchell,

Thanks for the input, but the listener doesn't get triggered by the plugin. This is the one I added to my 'list' xtype;


beforeselect: function(extDataView, HTMLElement, selections){
console.log(extDataView, HTMLElement, selections);
}

Nothing gets logged to my console, so I guess the event is never fired.

For clarification my whole config looks like this:


MyApp.views.cards.SearchResult = Ext.extend(Ext.Panel, {
layout: 'fit',
dockedItems: [
{
xtype: 'toolbar',
title: 'Search',
items: [
{
text: 'Back',
itemId: 'backBtn',
ui: 'back',
handler: function() {
Ext.dispatch({
controller: 'Home',
action: 'searchForm'
});
}
}
]
}
],
items: [
{
xtype: 'list',
store: 'Search',
emptyText: 'No search results',
fullscreen: true,
listeners:{
itemtap: function(self, index, node, event) {
var record = self.getRecord(node).data;
Ext.dispatch({
controller: "Home",
action: "resultDetail",
id: record.id,
name: record.title
});
},
beforeselect: function(extDataView, HTMLElement, selections) {
console.log(extDataView, HTMLElement, selections);
}
},
itemCls: 'resultListItem',
itemTpl: MyApp.views.templates.ResultListItem,
plugins: [
{
ptype: 'listpaging',
autoPaging: true,
loadMoreText: 'Searching...'
}
]
}
]
});
Ext.reg('searchresultcard', MyApp.views.cards.SearchResult);

mitchellsimoens
14 Sep 2011, 7:16 AM
Is the beforedeselect or selectionchange event firing?

Martin1982
14 Sep 2011, 1:10 PM
I'm afraid to say both aren't giving me any console logging when adding them to the list's listeners

Martin1982
29 Sep 2011, 12:10 AM
After looking into this issue again I found the solution myself. It wasn't a plugin option I was looking for, but it was the store which needed adjustment by adding the following config property;



clearOnPageLoad: false


Seems like I was looking in the wrong place, live and learn, and I hope others will find this useful.