Paging Plugin

[bjornravers]

Hello everyone,

I'm working on a application that loads a big store (7000 records). What I want do is show 50 and then let it load the next 50 (as the paging plugin does). Although I can't seem to get it to work. I can load my store, but its always looping the same 50 records. Right now the api is set like this:

url: 'http://admin.hishanghai.info/sencha/placesearch.php?action=read&callback=callback&q=e&page1',

To get the next page it is:

url: 'http://admin.hishanghai.info/sencha/placesearch.php?action=read&callback=callback&q=e&page2',

I don't know if it's possible to this and how. Right now I'm using the plugin like this:

plugins: [        
{
            xclass: 'Ext.plugin.ListPaging',
            autoPaging: true
        }
    ],

Any help will be greatly appreciated!

Ext.define('android.store.Searchstore', {
	extend: 'Ext.data.Store',
	requires: ['android.model.Searchmodel', 'Ext.data.proxy.JsonP'],


	config: {
		model: 'android.model.Searchmodel',
		pageSize: 5,
		sorters: [{ property : 'name', direction: 'DESC' }], 
		autoLoad: true,
		proxy: {
			type: 'scripttag',
			url: 'http://admin.hishanghai.info/sencha/placesearch.php?action=read&callback=callback&q=e',
			reader: {
				type: 'json',
				rootProperty: 'place'
			},
			extraParams: {
				action: 'read'
			}
		}
	}
})

[siebmanb]

Does the "page" property changes when you click on "load more" ? To see it, you can alert the value from the beforeload function in your store.
Also did you use the loadPage function and not the load function in your controller ?

[bjornravers]

First of all thanks for the reply!

Does the "page" property changes when you click on "load more" ? To see it, you can alert the value from the beforeload function in your store.

proxy.PNG
This is a screenshot from after 2 load more's, so I don't think it's loading the new page, although the data is changing. So when I do a load the first time it's this information:
storedata1.jpg
But when I scroll down and do a load more it shows the right data, it's just not showing in the list.
storedata2.PNG

Also did you use the loadPage function and not the load function in your controller ?

Sorry, I don't understand what you mean here. I'm new to Sencha so sorry.. Can you maybe give an example of what you mean here..

Sorry I'm still learning Sencha

[siebmanb]

Ok first can you make sure your server returns the next 50 records ? For that, use Chrome debugging tool. In the network tab you can see the requests. You will be able to see the parameters in the url, and the response from the server.

[bjornravers]

Hi thanks for the reply!

It's loading the next 50 now (so that's fixed), it's also loading the next page
paging1.PNG
As you can see here.

Now I got another problem, when I do a next search the page is still on 5 (the last opened page). So I need to get it back to 1 when I do another search, also the "all records loaded" message doesn't show when the count is 0.
paging2.PNG
My list, i changed this to dataview list I don't know if this is the right way?

Ext.define('android.view.SearchList', {  extend: 'Ext.dataview.List',
  xtype: 'searchlist',
   requires: [
		'android.store.Searchstore',
		'Ext.plugin.ListPaging'
		//'android.view.PlacesDetail',
    ],
	
  config: {
   store: 'Searchstore',
  plugins: [
        {
           	xclass:'Ext.plugin.ListPaging',
            autoPaging: true,


            // These override the text; use CSS for styling
            loadMoreText: 'Loading...',
            noMoreRecordsText: 'All messages loaded'
        }
    ],

Store:

model: 'android.model.Searchmodel',pageSize: 50,
clearOnPageLoad: false,

Thanks for the help

[kailash.kelly]

Try to define id for the model

[bjornravers]

How do you mean? How should I use that ID?
Right now my model looks like this:

Ext.define('android.model.Placesmodel', {    extend: 'Ext.data.Model',
	
    config: {
     fields: ["id","name","name_ch","address","address_apt","address_notes","address_ch","address_ch_apt","address_ch_notes","gps_x","gps_y","notes","description","website","email","phone","date_updated","trepme","score","is_closed","id_pic","picture","categories"],
    }
});

[kailash.kelly]

Ext.define('android.model.Placesmodel', { extend: 'Ext.data.Model', config: { idProperty : "id", fields: ["id","name","name_ch","address","address_apt","address_notes","address_ch","address_ch_apt","address_ch_notes","gps_x","gps_y","notes","description","website","email","phone","date_updated","trepme","score","is_closed","id_pic","picture","categories"],

[bjornravers]

Ok I added the idProperty, what am I supposed to do with it? sorry I'm kinda new to Sencha

[bjornravers]

I solved it, I set the page back to 1 every time I do a search

			var searchstore = Ext.getStore("Searchstore");
			searchstore.getProxy().setUrl(url);
			var proxy= searchstore.getProxy();
			proxy.setExtraParam('action', 'read' );
			proxy.setExtraParam('q', value );
			searchstore.loadPage(1);
			searchstore.load();