title: Sencha Touch Panel setActiveItem not working
body: <p>I am building an app with Sencha touch. I have my viewport as a Carousel and inside that carousel there are 2 panels.</p>
  
  <p>The second panel in that viewport is also a container for 2 nested panels.</p>
  
  <pre><code>App.views.Viewport = Ext.extend(Ext.Carousel, {
      fullscreen: true,
      indicator: false,
      layout: 'card',
      cardSwitchAnimation: 'slide',
      initComponent: function() {
          Ext.apply(App.views, {
              mainWindow: new App.views.MainWindow(),
              categories: new App.views.Categories()
          });
          Ext.apply(this, {
              items: [
                  App.views.mainWindow,
                  App.views.categories
              ]
          });
  
          App.views.Viewport.superclass.initComponent.apply(this, arguments);
      }
  });
  
  App.views.Categories = Ext.extend(Ext.Panel, {
      fullscreen: true,
      layout: 'card',
      cardSwitchAnimation: 'slide',
      initComponent: function() {
          Ext.apply(App.views, {
              categoriesList: new App.views.CategoriesList(),
              categoryDetail: new App.views.CategoryDetail()
          });
          Ext.apply(this, {
              items: [
                  App.views.categoryDetail,
                  App.views.categoriesList
              ]
          });
          App.views.Viewport.superclass.initComponent.apply(this, arguments);
      }
  });
  </code></pre>
  
  <p>Here's the code for the categoriesList</p>
  
  <pre><code>Ext.regModel('Contact', {
      fields: ['firstName', 'lastName']
  });
  
  App.ListStore = new Ext.data.Store({
      model: 'Contact',
      sorters: 'firstName',
      getGroupString : function(record) {
          return record.get('firstName')[0];
      },
      data: [
          {firstName: 'Julio', lastName: 'Benesh'},
      ]
  });
  
  App.views.catsList = new Ext.List({
      store: App.ListStore,
      itemTpl: '&lt;div class="contact"&gt;&lt;div class="app_icon"&gt;&lt;img src="images/angry-birds.png" width="50" height="50" /&gt;&lt;/div&gt;&lt;div class="app_name"&gt;&lt;strong&gt;{firstName}&lt;/strong&gt; {lastName}&lt;br /&gt;&lt;img src="images/rating-icon.gif" /&gt;&lt;/div&gt;&lt;/div&gt;',
      onItemDisclosure: function(record, btn, index) {
          App.views.categories.setActiveItem(
                      App.views.categoryDetail, options.animation
                  );
      }
  });
  
  App.views.CategoriesList = Ext.extend(Ext.Panel, {  
      layout: 'fit',
      items: [App.views.catsList],
      initComponent: function() {
          App.views.Categories.superclass.initComponent.apply(this, arguments);
      }
  });
  </code></pre>
  
  <p>onItemDisclosure of the list elements is being triggered. however, the setActiveItem for the App.views.categories is not switching to categoryDetail. I've been struggling to get this working. Any idea what i am doing wrong? </p>