Sencha touch: cannot get reference to items in panel - sencha-touch

Question

I'm am trying to get MVC to work in my first application and am trying to change cards based button clicked in toolbar.
I'm getting a runtime error when I click the hello or world button in the toolbar: TypeError: Cannot read property 'items' of undefined on the line:
var exerciseListPanel = this.items.items[0], // CODE ERRORS HERE!
I'm having a problem in getting a reference to the items in the panel, WHY?
Here is the complete code for the panel:
MyApp.views.HomeScreenPanel = Ext.extend(Ext.Panel, {
layout : 'card',
cardSwitchAnimation: 'slide',
initComponent : function() {
this.dockedItems = this.buildDockedItems();
this.items = this.buildItemList();
MyApp.views.HomeScreenPanel.superclass.initComponent.call(this);
},
buildItemList : function(){
return [
new Ext.Panel({html:"hello"}),
new Ext.Panel({html:"world"}),
];
},
buildDockedItems : function(){
return [
this.buildTopDockToolbar(),
this.buildBottomDockToolbar(),
];
},
buildTopDockToolbar : function(){
return {
xtype : 'toolbar',
dock : 'top',
title : 'My first MVC app',
};
},
buildBottomDockToolbar : function(){
return this.NavigationToolbar();
},
NavigationToolbar : function(){
return{
xtype : 'toolbar',
dock : 'bottom',
defaults : {
handler : this.NavigationToolbarHandler,
controller: 'NavigationBarController'
},
items : [
{
text : 'hello',
action: 'hello'
},
{
text : 'world',
action : 'world'
}]
};
},
NavigationToolbarHandler : function(btn) {
var exerciseListPanel = this.items.items[0], // CODE ERRORS HERE!
workoutListPanel = this.items.items[1];
Ext.dispatch({
controller : btn.controller,
action : btn.action,
views : {
exerciseListPanel: exerciseListPanel,
workoutListPanel: workoutListPanel,
}
})
},
});
Ext.reg('HomeScreenPanel',MyApp.views.HomeScreenPanel);
Here is the code for the controller but I don't there is a problem here:
Ext.regController('NavigationBarController', {
world : function(dataObj) {
Ext.Msg.alert(
'world!',
'world button pressed from toolbar',
Ext.emptyFn
);
MyApp.views.HomeScreenPanel.setActiveItem(dataObj.views.worldPanel); // CORRECT SYNTAX????
},
hello : function(dataObj) {
Ext.Msg.alert(
'hello',
'hello button pressed',
Ext.emptyFn
);
MyApp.views.HomeScreenPanel.setActiveItem(dataObj.views.helloPanel); // CORRECT SYNTAX?????
}
});

Answer 1

It is probably just a scope issue. try:
exerciseListPanel = MyApp.views.HomeScreenPanel.items.items[0];
In this context this is probably the button.

Answer 2

Items is a MixedCollection so use the get function.
http://docs.sencha.com/touch/1-1/#!/api/Ext.util.MixedCollection
MyApp.views.HomeScreenPanel.items.get(0);
Bit late but for anyone else googling in the future ;)