I am following the MVC pattern and have the following setup using Sencha Touch. The code below displays the list of items and they are clickable. On click the next view is pushed to the screen. However the NavigationController's controller is no longer picking up events on this new view. I was hoping to have the 1 controller against the navigationView that handled pushing on popping on click of any card in the list. As you can see I am simply pushing the same view into the stack.

Any ideas on why the controller is not picking up the events for the second screen? If I push the back button the events for the first screen still work and will take me back to the second screen. I realize this would be an endless navigation but in practice it wont be.

GS.view.NavigationController
Code:
Ext.define('GS.view.NavigationContainer', {
extend: 'Ext.NavigationView', alias: 'widget.navigation-container', requires: [ 'GS.view.ServerList' ], config: {
items: [{
itemId: 'listSection', title: 'First', xtype: 'server-list'
}]
}
});
GS.view.ServerList
Code:
Ext.define('GS.view.ServerList', {
extend: 'Ext.List', alias: 'widget.server-list', config: {
itemTpl: '{title}', data: [
{ id: 1, title: 't1' }, { id: 2, title: 't2' }, { id: 3, title: 't3' }, { id: 4, title: 't4' }
]
}
});
GS.controller.NavigationContainer
Code:
Ext.define('GS.controller.NavigationContainer', {
extend: 'Ext.app.Controller', config: {
views: ['NavigationContainer'], refs: {
navigationContainer: 'navigation-container'
}
control: {
'navigation-container #listSection': {
select: 'onSelect'
}
}
}, onSelect: function(view, record) {
var navigationContainer = this.getNavigationContainer(); navigationContainer.push({
title: record.get('title'), xtype: 'server-list'
});
}
});