Add items to list after tap on Load More

[Madsex]

Hi, after many searches i have add at the end of my list. To do this i have add in the code the plugin Ext.plugin.ListPaging . So i can't understand how to use the final botton to add other items from my server.

Someone can help me?

this is the code :

mystore.js

Ext.define('xxx.store.Blogs', {
	
	
	extend: 'Ext.data.Store',
		
    xtype : 'blogs',
	
	config:{
		
		  model: 'fantacampioni.model.Blogm',
		        
				autoLoad: true,                 
                proxy: {
                    type: 'ajax',
                    url: 'http://www.xxx.it/ios/ajax.php', 
					
					extraParams:{
						
						start :0,
						end: 3
						
						},
																								                    
                    reader: {
                        type: 'json', 						           
                    },
							
                },//proxy	
							
	         }//config	
	})

mypageview.js

Ext.define('xxx.view.Blog', {
    extend: 'Ext.navigation.View',
	
	requires:[
	
	'fantacampioni.store.Blogs',
	'Ext.dataview.List',
		
	],	
	
    xtype: 'blog',
	
    config: {
        title: 'blog',
        iconCls: 'star',  
		scrollable:true,
		styleHtmlContent:true,    
		
		items:[{
		
		xtype:'list', 
		itemTpl:'{post_title}',
		title:'Recenti',
		store: 'Blogs',
		
		plugins: [{			  
			  
              xclass: 'Ext.plugin.ListPaging',
              autoPaging: false,
			  loadMoreText: 'Altri articoli',
			  loadMoreCmp: {
                          xtype: 'component',
                          cls: 'hola'
                        },
								               
           }],
		
		}]	
		  	  		    
    }// config
           
});

mycontroller.js

Ext.define('xxx.controller.Main', {
    extend: 'Ext.app.Controller',
    
    config: {
        refs: {
			
			blog : 'blog',
            
        },
        control: {
			
			'blog list': {
				
				itemtap: 'showPost'
				
				},       
        }
    },
    showPost: function(list, index, element, record) {
		this.getBlog().push({
			xtype: 'blogdetails',
			title: record.get('post_title'),
			data: record.data
			
		})
	},
	
	
});

Oviusly i prefer that every time a user tap on the load more the store change his parameters ( es: start 3, end: 6).

How can i do this ?

Thank for help !

[vadimv]

no need for those extraParams, you just set the pageSize(default is 25) and the store automatically does pagination for you, also the server should return back the total of records, otherwise it won't work:

{"total":62,"data":[{},{}]}

[Madsex]

Itried to add pageSize in config of store but nothing happen, the aja request to my server returns all records and in the app are showind all records.

this is the code:

Ext.define('xxx.store.Blogs', {    
    
    extend: 'Ext.data.Store',
        
    xtype : 'blogs',
    
    config:{
        
          model: 'xxx.model.Blogm',
                
                autoLoad: true, 
                pageSize: 2,
                                
                proxy: {
                    type: 'ajax',
                    url: 'http://www.xxx.it/ios/ajax.php',         
                                                                                                                                            
                    reader: {
                        
                        type: 'json',    
                        totalProperty: 'totalCount',
                        rootProperty: 'countries',
                        successProperty: 'success',
                                                                                           
                    },
                            
                },//proxy    
                            
             }//config    
             
    })

Maybe i wrong the position of pageSize and i don't know where i add "total".

Thanks for help !

[vadimv]

the server when requesting from

'http://www.xxx.it/ios/ajax.php',

should return

{"totalCount":62,"countries":[{},{}]}

[Madsex]

Ok, i have change somethings in my ajax.php but the pageSize not work, probabily i wrong somethins in th ajax.php .

Can you help me?

http://xxx.it/ajax.php

$custom = array('totalCount'=> 50);
$return = array();

$query=mysql_query( "SELECT* FROM wp_posts WHERE post_status='publish'" );
while($temp=mysql_fetch_assoc($query)){
    
      $posts[] = $temp;
    
    }


$return['total'] = $custom;
$return['data'] = $posts; 

echo json_encode($return);

this is a part of my echo in ajax.php with beautifier:

{
    "total": {
        "totalCount": 50
    },
    "data": [{
            "ID": "2",
            "post_author": "1",
            "post_date": "2012-05-15 09:41:57",
            "post_date_gmt": "2012-05-15 09:41:57",
            "post_content": "Questa \u00e8 una pagina di esempio. Differisce da un articolo del blog perch\u00e9 rimane in posizione fissa e appare nella navigazione del sito (nella maggior parte dei temi). Molte persone iniziano con una pagina informativa che li introduce ai potenziali visitatori. Che potrebbe dire un cosa del genere:\n\n

    Salve! Sono un pony express di giorno, un aspirante attore di notte e questo \u00e8 il mio blog. Vivo a Los Angeles, ho un bellissimo cane di nome Jack e adoro la piña colada. (E trovarmi sotto la pioggia.)<\/blockquote>\n\n...oppure qualche cosa del genere:\n\n

        La XYZ Doohickey Company \u00e8 stata fondata nel 1971 e da allora ha venduto cazzabubbole di qualit\u00e0 ai propri clienti. SI trova a Gotham City, XYZ impiega oltre 2.000 persone e produce le cose pi\u00f9 incredibili per la comunit\u00e0 di Gotham.<\/blockquote>\n\nCome nuovo utente WordPress, \u00e8 possibile andare sulla bacheca<\/a> per eliminare questa pagina e creare nuove pagine per i propri contenuti. Buon divertimento!",
            "post_title": "Pagina di esempio.",
            "post_excerpt": "",
            "post_status": "publish",
            "comment_status": "open",
            "ping_status": "open",
            "post_password": "",
            "post_name": "pagina-di-esempio",
            "to_ping": "",
            "pinged": "",
            "post_modified": "2012-05-15 09:41:57",
            "post_modified_gmt": "2012-05-15 09:41:57",
            "post_content_filtered": "",
            "post_parent": "0",
            "guid": "http:\/\/localhost:8888\/wordpress\/?page_id=2",
            "menu_order": "0",
            "post_type": "page",
            "post_mime_type": "",
            "comment_count": "0"
        }, {
            "ID": "31",
            "post_author": "1",
            "post_date": "2012-07-18 13:56:42",
            "post_date_gmt": "2012-07-18 13:56:42",
            "post_content": "Ogni comunicazione ha un obiettivo e cos\u00ec ogni sito internet.Gli obiettivi possono essere i pi\u00f9 diversi ma per raggiungerli ci vuole sempre impegno proporzionale ci\u00f2 che si vuole raggiungere, ovvero: grandi obiettivi, grandi impegni.\r\n\r\nRead more >><\/a>",
            "post_title": "Web",
            "post_excerpt": "",
            "post_status": "publish",
            "comment_status": "open",
            "ping_status": "open",
            "post_password": "",
            "post_name": "comunicazione",
            "to_ping": "",
            "pinged": "",
            "post_modified": "2012-07-18 16:49:39",
            "post_modified_gmt": "2012-07-18 16:49:39",
            "post_content_filtered": "",
            "post_parent": "0",
            "guid": "http:\/\/192.168.1.142:8888\/wordpress\/?p=31",
            "menu_order": "0",
            "post_type": "post",
            "post_mime_type": "",
            "comment_count": "0"
        }, {
            "ID": "43",
            "post_author": "1",
            "post_date": "2012-07-18 16:18:18",
            "post_date_gmt": "2012-07-18 16:18:18",
            "post_content": "Cos\u00ec com'\u00e8 vero che siamo fatti della stessa materia di cui sono fatti i sogni, un sito web \u00e8 fatto della materia di cui sono fatti gli hosting.Se poi si sogna di realizzare un sito web, il primo passo, per dare corpo a questo desiderio nel mondo cliccabile, sar\u00e0 scegliere la materia giusta.\r\n\r\nRead more >><\/a>\r\n",
            "post_title": "Hosting",
            "post_excerpt": "",
            "post_status": "publish",
            "comment_status": "open",
            "ping_status": "open",
            "post_password": "",
            "post_name": "hosting",
            "to_ping": "",
            "pinged": "",
            "post_modified": "2012-09-07 16:34:53",
            "post_modified_gmt": "2012-09-07 16:34:53",
            "post_content_filtered": "",
            "post_parent": "0",
            "guid": "http:\/\/192.168.1.142:8888\/wordpress\/?p=43",
            "menu_order": "0",
            "post_type": "post",
            "post_mime_type": "",
            "comment_count": "0"
        }, {
            "ID": "51",
            "post_author": "1",
            "post_date": "2012-07-23 15:17:45",
            "post_date_gmt": "2012-07-23 15:17:45",
            "post_content": "In molti casi, quando su internet si trova qualcosa \"per caso\", non \u00e8 un caso. Grazie ai nostri servizi di SEO e Webmarketing svilupperemo insieme delle strategie per trasformare la casualit\u00e0 in un'opportunit\u00e0 di business.\r\n\r\nRead more >><\/a>",
            "post_title": "SEO, WEB MARKETING",
            "post_excerpt": "",
            "post_status": "publish",
            "comment_status": "open",
            "ping_status": "open",
            "post_password": "",
            "post_name": "seo-web-marketing",
            "to_ping": "",
            "pinged": "",
            "post_modified": "2013-04-22 15:27:21",
            "post_modified_gmt": "2013-04-22 15:27:21",
            "post_content_filtered": "",
            "post_parent": "0",
            "guid": "http:\/\/192.168.1.142:8888\/wordpress\/?p=51",
            "menu_order": "0",
            "post_type": "post",
            "post_mime_type": "",
            "comment_count": "0"
        }, ......
    ]
}

mystore.js

Ext.define('xxx.store.Blogs', {    
    
    extend: 'Ext.data.Store',
        
    xtype : 'blogs',
    
    config:{
        
          model: 'xxx..model.Blogm',
                
                autoLoad: true, 
                                
                proxy: {
                    type: 'ajax',
                    url: 'http://www.xxx.it/ajax.php',         
                                                                                                                                            
                    reader: {
                        
                        type: 'json',    
                        totalProperty: 'total',
                        rootProperty: 'data',
                        successProperty: 'success',
                                                                                           
                    },
                            
                },//proxy    
                
                pageSize: 2,
                            
             }//config    
             
    })

The app continue to show all results from my server and if i tap "load more" the same list is duplicate.

Please, help !

Thank you !

[Madsex]

I have change my php script, now is more similar to your sugestions but i see again all records in the list and if i tap "load more" the list is duplicare:

ajax.php on my server

<?php 
include_once('../wp-config.php');
include_once('../wp-load.php');
include_once('../wp-includes/wp-db.php');

$return = array();

$query=mysql_query( "SELECT* FROM wp_posts WHERE post_status='publish' " );

$totale = mysql_num_rows($query);

while($temp=mysql_fetch_assoc($query)){
    
      $posts[] = $temp;
    
    }


$return['totalCount'] = $totale;
$return['data'] = $posts; 

echo json_encode($return);


?>

How you can see my php script obtain all record from the query, without limit, than i print the records in json type.

store.js

Ext.define('xxx.store.Blogs', {    
    
    extend: 'Ext.data.Store',
        
    xtype : 'blogs',
    
    config:{
        
          model: 'xxx.model.Blogm',
                
                autoLoad: true, 
                                
                proxy: {
                    type: 'ajax',
                    url: 'http://www.XXX.IT/ajax.php',    
                                                                                                                                            
                    reader: {
                        
                        type: 'json',    
                        rootProperty: 'data',
                        totalProperty: 'totalCount',
                                                                                           
                    },
                            
                },//proxy    
                
                pageSize: 2,
                            
             }//config    
             
    })

In the store i have set pageSize on 2, i think that "pageSize" work to show only the firsts two results of the records. Is my idea correct?

view.js

Ext.define('xxx.view.Blog', {
    extend: 'Ext.navigation.View',
    
    requires:[
    
    'xxx.store.Blogs',
    'Ext.dataview.List',
    'Ext.data.proxy.JsonP'
        
    ],    
    
    xtype: 'blog',
    
    config: {
        title: 'blog',
        iconCls: 'star',  
        scrollable:true,
        styleHtmlContent:true,    
        
        items:[{
        
        xtype:'list', 
        itemTpl:'{post_title}',
        title:'Recenti',
        store: 'Blogs',        
        
        plugins: [{              
              
              xclass: 'Ext.plugin.ListPaging',
              autoPaging: false,
              loadMoreText: 'Altri articoli',
              noMoreRecordsText :'finito',
              loadMoreCmp: {
                          xtype: 'component',
                          cls: 'hola'
                        },
                                                                   
                 }],        
              }]                                
          }// config
           
});

In the view i have add the "Ext.plugin.ListPaging" to obtain under the list the "load More" button, i think that it is set correctly.

How i can obtain a Load More where when i tap on it my list add other items from the server and the list start with only 2 items?

Thanks for help !