title: Showing a carousel from a nestedList - possibly using handler?
body: <p>I have a nestedList - when I get to the final item, I would like to call a handler that swaps the panel to a carousel.  Please see - <a href="http://test.miaduk.com/mobile/TLE/" rel="nofollow">http://test.miaduk.com/mobile/TLE/</a></p>
  
  <p>Unfortunately I can't seem to get any handlers to work on the nested Items and can not think of another way.  I'm still very much a beginner in Sencha, so any help would be appreciated.
  Thank you!</p>
  
  <p>See code:</p>
  
  <pre><code>Ext.setup({
  icon: 'icon.png',
  tabletStartupScreen: 'tablet_startup.png',
  phoneStartupScreen: 'phone_startup.png',
  glossOnIcon: true,
  onReady: function() {
  
  
      /*Data Store
      *********************************************************************************/
  var data = {
      text: 'Categories',
      items: [{
          text: 'Core Skills/Personal Development',
          items: [{
              text: 'Fishbone Diagram',
              leaf: true
          },{
              text: '5 Whys Technique',
              leaf: true
          },{
              text: 'SMART Objectives',
              leaf: true
          },{
              text: 'Circle of Influence',
              leaf: true
          },{
              text: 'Managing Stress',
              leaf: true
          }]
      },{
          text: 'Communication',
          items: [{
              text: 'Listening Skills',
              leaf: true
          },{
              text: 'Giving Feedback',
              leaf: true
          },{
              text: 'Recieving Feedback',
              leaf: true
          }]
      },{
          text: 'Customer Service',
          items: [{
              text: 'Listening and Confirming',
              leaf: true
          }]
      }]
  };
  Ext.regModel('ListItem', {
      fields: [{name: 'text', type: 'string'}]
  });
  var store = new Ext.data.TreeStore({
      model: 'ListItem',
      root: data,
      proxy: {
          type: 'ajax',
          reader: {
              type: 'tree',
              root: 'items'
          }
      }
  });
  var nestedList = new Ext.NestedList({
      fullscreen: true,
      title: 'Categories',
      displayField: 'text',
      dock: 'top',
      store: store
  });
  
  
      /*Carousel
      *********************************************************************************/
      var carousel = new Ext.Carousel({
      fullscreen: true,
      displayField: 'text',
      dock: 'top',
          defaults: {
              cls: 'card'
          },
          items: [{
              html: '&lt;img src="drainImage1.png"&gt;'
          },
          {
              title: 'Tab 2',
              html: '&lt;img src="drainImage2.png"&gt;'
          }]
      });
  
  
      /*Tab Panel
      *********************************************************************************/
  
      var tabpanel = new Ext.TabPanel({
          tabBar: {
              dock: 'bottom',
              layout: {
                  pack: 'center'
              }
          },
          fullscreen: true,
          ui: 'light',
          cardSwitchAnimation: {
              type: 'slide',
              cover: true
          },
  
          defaults: {
              scroll: 'vertical'
          },
          items: [{
              title: 'My Courses',
              html: '&lt;h1&gt;Course list to appear here&lt;/h1&gt;',
              iconCls: 'favorites',
              cls: 'card2',
              badgeText: '3',
              dockedItems: nestedList
          },{
              title: 'Sample',
              cls: 'card2',
              iconCls: 'user',
              dockedItems: carousel
          },{
              title: 'Help',
              html: '&lt;h1&gt;Help&lt;/h1&gt;&lt;p&gt;Info on how to add to your home screen goes here&lt;/p&gt;',
              cls: 'card3',
              iconCls: 'user'
          }]
      });
  </code></pre>