Hybrid View

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    15
    Vote Rating
    0
    Madsex is on a distinguished road

      0  

    Default Add items to list after tap on Load More

    Add items to list after tap on Load More


    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
    Code:
    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

    Code:
    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

    Code:
    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 !

  2. #2
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    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:
    Code:
    {"total":62,"data":[{},{}]}

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    15
    Vote Rating
    0
    Madsex is on a distinguished road

      0  

    Default


    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:

    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 !

  4. #4
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    the server when requesting from
    'http://www.xxx.it/ios/ajax.php',
    should return
    Code:
    {"totalCount":62,"countries":[{},{}]}

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    15
    Vote Rating
    0
    Madsex is on a distinguished road

      0  

    Default


    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

    Code:
    $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:

    Code:
    {
        "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

    Code:
    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 !

  6. #6
    Sencha User
    Join Date
    Jun 2012
    Posts
    15
    Vote Rating
    0
    Madsex is on a distinguished road

      0  

    Default


    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

    Code:
    <?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
    Code:
    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

    Code:
    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 !

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi