1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    Belgium
    Posts
    4
    Vote Rating
    0
    neris is on a distinguished road

      0  

    Default Answered: Referencing back button

    Answered: Referencing back button


    I am displaying a huge amount of products in a deep nested structure, so instead of using a NestedList I push regular Lists into a View when a certain item is tapped.

    So far so good, I however can't seem to figure out how I should manage the back button. I tried capturing the "back" event in my View but it isn't triggered for some reason.

    Below is my View object - could someone elaborate?

    Code:
    Ext.define("Fw.view.Products", {	extend: "Ext.navigation.View",   
    	requires: ["Fw.model.PMC", "Fw.store.PMC", "Fw.model.PC", "Fw.store.PC", "Fw.model.P", "Fw.store.P"],
    	fullscreen: true,
    	autoDestroy: false,
    	initialize: function() {
    		var me = this;
            var PMCList = 
            Ext.create('Ext.List',{
                title: 'Producten',
                itemTpl: '{Name}',
                store: Ext.create("Fw.store.PMC"),
                listeners: {
                    itemtap: function(l, i, t, r, e) {
                    	var PCList = 
                    	Ext.create('Ext.List', {
    						title: 'Producten',
    					    itemTpl: '{Name}',
    				        store: Ext.create("Fw.store.PC"),
    				        listeners: {
    				        	itemtap: function(l, i, t, r, e) {
    				        		var PList = 
    				        		Ext.create("Ext.List", {
    				        			title: "Producten",
    				        			itemTpl: 
    				        			new Ext.XTemplate(
    									    '<tpl for=".">',
    											'{Thumb:this.addThumb}{Name} &euro; {Price}',
    									    '</tpl>',
    									    {
    								        	addThumb: function(thumb) {
    								        		if(thumb) {
    								        			return '<img src="'+thumb+'" width="140" height="140">';	
    								        		}
    								        	}
    								    	}
    								    ),
    				        			store: Ext.create("Fw.store.P")
    				        		});
    				        		
    						      	PList.config.store.load({
    						      		params: {
    						      			PCID: r.raw.PCID
    						      		}
    						      	});
    
    
    				        		me.push(PList);
    				        	}
    				        }
    			      	});
    			      	
    			      	PCList.config.store.load({
    			      		params: {
    			      			PMCID: r.raw.PMCID
    			      		}
    			      	});
    			      	
                        me.push(PCList);
                    }
                }
            });
            
            me.push(PMCList);
    	}
    });

  2. The back event isn't firing here because in your initialize method, you didn't call this.callParent() before defining your custom code. Put that in there and you'll be on your way.

    As far as managing the back button, there's no need to do so since you're using a navigation view. However if there is something else you need to do on the back event I would suggest at the very least defining a controller like this:

    Code:
    Ext.define('Fw.controller.Products', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            control: {
                'products': {
                    back: 'goBack'
                }
            }
        },
    
    
        goBack: function(navView, opt) {
            // ... do something else when back event fires ...
        }
    });
    You could go even farther and factor out all those lists into their own views then have the controller listen for itemtaps and push the appropriate views into your navigation list. That'll keep everything separate and a little cleaner.

    Overall though to get this working as is, just add that call to the parent in initialize.

    One more thing, your code is directly referencing your config to get to your store which is defeating the purpose of using configs. For example your code:

    PList.config.store

    should be:

    PList.getStore()



    Brice

  3. #2
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    The back event isn't firing here because in your initialize method, you didn't call this.callParent() before defining your custom code. Put that in there and you'll be on your way.

    As far as managing the back button, there's no need to do so since you're using a navigation view. However if there is something else you need to do on the back event I would suggest at the very least defining a controller like this:

    Code:
    Ext.define('Fw.controller.Products', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            control: {
                'products': {
                    back: 'goBack'
                }
            }
        },
    
    
        goBack: function(navView, opt) {
            // ... do something else when back event fires ...
        }
    });
    You could go even farther and factor out all those lists into their own views then have the controller listen for itemtaps and push the appropriate views into your navigation list. That'll keep everything separate and a little cleaner.

    Overall though to get this working as is, just add that call to the parent in initialize.

    One more thing, your code is directly referencing your config to get to your store which is defeating the purpose of using configs. For example your code:

    PList.config.store

    should be:

    PList.getStore()



    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

Thread Participants: 1

Tags for this Thread

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..."