title: Sencha touch: cannot get reference to items in panel
body: <p>I'm am trying to get MVC to work in my first application and am trying to change cards based button clicked in toolbar. </p>
  
  <p>I'm getting a <strong>runtime error</strong> when I click the hello or world button in the toolbar: <strong>TypeError: Cannot read property 'items' of undefined</strong> on the line:
  <code>var exerciseListPanel = this.items.items[0], // CODE ERRORS HERE!</code></p>
  
  <p><strong>I'm having a problem in getting a reference to the items in the panel, WHY?</strong></p>
  
  <p>Here is the complete code for the panel:</p>
  
  <pre><code>        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?????
  
      }
  });
  </code></pre>