Referencing back button

[neris]

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?

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);
	}
});

[bricemason]

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:

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