sencha list paging plugin load more

I'm trying to use sencha touch's listpaging plugin. But there is almost no good( or bad ) documentation about how to use it and i'm confused. When i activate the plugin in my list this.myList = new Ext.List({ store: this.myStore, plugins: [{ ptype: 'listpaging', autoPaging: false }], itemTpl: '...' }); a 'Load More' text and a loading image is added to the end of the list. But i don't know how to configure my store to enable this plugin to be able to load more data. App.regStore('MyStore', { model: 'myModel', proxy: { type: 'ajax', url: 'http://mydomain.com/json?howmany=10&page=1', reader: { type: 'json', root: 'results' } } }); App.stores.myStore = Ext.StoreMgr.get('MyStore'); How can i configure my store so when i tap "Load more", the store brings up page 2 and add them to the list automatically? sencha-touch link | improve this question edited  Oct 26 '11 at 19:45 asked  Sep 6 '11 at 14:20 keune 1,012 5 15 100% accept rate

Was this post useful to you?

3 Answers

active oldest votes

up vote 0 down vote accepted

I'm having problems finding good documentation, too, but I can at least answer your question. You need to add pageSize to your store, clearOnPageLoad as well, if you want to not clear out what was already loaded. Her's my code: Ext.regStore('publicresources', { model: 'PublicResource', autoLoad:false, remoteFilter:true, sortOnFilter:true, pageSize: 15, clearOnPageLoad: false, sorters: [ { property : 'distance', direction: 'ASC' } ] }); My outstanding issues that I'm looking into are: How to turn off the "More" element when there are no more records to load How to detect that there are no more records to load, and where to put that detection code. How to keep the list at the location that the user was at. Each load jumps back to the 1st item in the list Good luck! link | improve this answer answered  Sep 8 '11 at 14:19 John Gordon 217 3 13

Thanks for your answer, also please let me know if anything else comes up. –  keune  Sep 9 '11 at 19:44   item 3 in my outstanding items was a fault of my code. I had a piece of code that would force bringing the the user back to the top of the list on refresh of the data, so as to avoid another rendering error with sencha touch's list component. The bug manifests when the data replacing the list is less than what was originally there, causing the list to misrender. –  John Gordon  Sep 28 '11 at 12:42   Have you been able to find a solution to your first issue: "How to turn off the "More" element when there are no more records to load"? –  Ross  Feb 29 at 4:53 feedback

up vote 0 down vote	Remember also that this works only server side currently. Forum thread http://www.sencha.com/forum/showthread.php?105193-Store-pageSize link | improve this answer answered  Oct 24 '11 at 23:29 tcghyit 187 1 8
	feedback

up vote 0 down vote

I've had a similar issue with the ListPaging plugin in SenchaTouch 2, and managed to sort out the 'load more' message behaviour when the end of the data set is reached. This builds on what John Gordon has come up with (regarding specifying the pageSize andclearOnPageLoad config options), since these properties seem to be the same in Senchatouch 2. I haven't looked at SenchaTouch 1.x in detail. In SenchaTouch 2, all config options must be defined in aconfig property: Ext.define('MessagingApp.store.MessageThreads', { extend : 'Ext.data.Store', requires: ['MessagingApp.model.MessageThread'], config: { model: 'MessagingApp.model.MessageThread', autoLoad: false, clearOnPageLoad: false, // This is true by default pageSize: 10, // This needs to be set for paging proxy: { type: 'jsonp', pageParam: 'currentPage', limitParam: 'pageSize', url: APIURL + '/message-app-service/GetMessageThreads', reader: { type: 'json', rootProperty: 'Data' } } } }); In the view, where we specify the plugins, we can override the 'load more' and 'no more records' messages: { xtype:'dataview', store:'MessageThreads', id:'threadList', itemTpl:Ext.create('Ext.XTemplate', '<!-- template markup goes here -->', { //custom helper functions here } ), plugins:[ { xclass:'Ext.plugin.ListPaging', autoPaging: true, // These override the text; use CSS for styling loadMoreText: 'Loading...', noMoreRecordsText: 'All messages loaded' } ] } The issue is that while our web service returns an array of records for a particular page, there is no overall total count property, which is needed for the plugin to determine when all records have been loaded. Hence as it is, the 'Load more' message will remain (issue #1 in the accepted solution). So in theinit function of our controller, we have to attach an event handler for the load event on the store to hook into when a new page of data is received: Ext.define('MessagingApp.controller.Messages', { extend: 'Ext.app.Controller', config: { views: [ 'MessageThreads', // Other views referenced by this controller ], stores: [ 'MessageThreads' ], refs: { // References to UI elements by selector... } }, init: function() { // Other internal initialisation... this.control( { // Selector-object pairs... }); // Provide a means to intercept loads of each page of records var threadStore = Ext.getStore('MessageThreads'); threadStore.addBeforeListener('load', this.checkForThreadListEnd, this); }, // Remaining controller functions... }); In the handler, we realise that we've reached the end of the data set when the number of records returned is less than the page size. If the total record count is a multiple of the page size, the last 'page' will have an empty array. Once the end of the data set has been identified, we update the totalCountconfig property of the store: checkForThreadListEnd: function(store, records, isSuccessful) { var pageSize = store.getPageSize(); var pageIndex = store.currentPage - 1; // Page numbers start at 1 if(isSuccessful && records.length < pageSize) { //Set count to disable 'loading' message var totalRecords = pageIndex * pageSize + records.length; store.setTotalCount(totalRecords); } else store.setTotalCount(null); }, // Other controller functions... Because this is a 'before' event handler, this property will be crucially updated before the plugin decides whether to display the 'load more' or 'no more records' messages. Unfortunately, the framework doesn't provide a means to hide the 'no more records' message, so this would have to be done via CSS. Hope this helps. link | improve this answer answered  Mar 28 at 5:48 d_mcg 31 6

Thanks for d_mcg solution. there is other issue: the "No more records" link 's still clickable and it sends a request to the server once clicked. How do you resolve this ? many thanks :) –  Bogie  Mar 29 at 2:46   You're welcome :-) I haven't found an easy way to disable that button, mainly because SenchaTouch only provides the means to set the text of this button in either state (which is applied via an XTemplate in the 'private'loadTpl config property). You may be able to work some magic to intercept the tap event of this button and return false (which cancels the event), or use a funky CSS selector to hide the button in its 'no more records' state. You can see the internals of how Sencha does it at docs.sencha.com –  d_mcg  Mar 30 at 10:59   Forgot to say - you can hover over the green heading (i.e. the class name) to reveal the "View source..." link for that class. I've found that very helpful for figuring out some of the extra details that the documentation doesn't mention. –  d_mcg  Mar 30 at 11:07 feedback