title: Sencha Touch: Nested List inside a Tab Panel
body: <p>I'm still new to Sencha Touch/ExtJS, and I'm currently exploring the demos and getting started samples. But I stumbled upon this problem where when I insert a nested list on tab panel items I can't navigate the list items anymore.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>Ext.setup({
  tabletStartupScreen: 'tablet_startup.png',
  phoneStartupScreen: 'phone_startup.png',
  icon: 'icon.png',
  glossOnIcon: false,        
  
  onReady: function(){ 
  
      // store with data
      var data = {
          text: 'Groceries',
          items: [{
              text: 'Drinks',
              items: [{
                  text: 'Water',
                  items: [{
                      text: 'Sparkling',
                      leaf: true
                  },{
                      text: 'Still',
                      leaf: true
                  }]
              },{
                  text: 'Coffee',
                  leaf: true
              },{
                  text: 'Espresso',
                  leaf: true
              },{
                  text: 'Redbull',
                  leaf: true
              },{
                  text: 'Coke',
                  leaf: true
              },{
                  text: 'Diet Coke',
                  leaf: true
              }]
          },{
              text: 'Fruit',
              items: [{
                  text: 'Bananas',
                  leaf: true
              },{
                  text: 'Lemon',
                  leaf: true
              }]
          },{
              text: 'Snacks',
              items: [{
                  text: 'Nuts',
                  leaf: true
              },{
                  text: 'Pretzels',
                  leaf: true
              },{
                  text: 'Wasabi Peas',
                  leaf: true
              }]
          },{
              text: 'Empty Category',
              items: []
          }]
      };
      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: 'Groceries',
          displayField: 'text',
          dock: 'top',
          store: store
      });
  
      var btnSpecTop = [
          { ui: 'back', text: 'Back'},
          { xtype: 'spacer' },
          { ui: 'default', text: 'Login' }
      ] // end btnSpecTop
  
  
      var tapHandler = function (btn, evt) {
          alert("Button '" + btn.text + "' tapped.");
      }        
  
  
      var dockedItems = [{
          xtype: 'toolbar',
          dock: 'top',
          title: 'Demo',
          items: btnSpecTop,
          defaults: { handler: tapHandler }
          },
          {
              xtype: 'tabpanel',
              layout: 'card',
              dock: 'top',
              fullscreen: true,
              items:[{
                  title: 'test1',
                  html: '&lt;p&gt;test 1&lt;/p&gt;'
              },
              {
                  title: 'test2',
                  html: '&lt;p&gt;test 2&lt;/p&gt;',
                  dockedItems: nestedList
              },
              {
                  title: 'test3',
                  html: '&lt;p&gt;test 3&lt;/p&gt;'
              }]
          }                
      ]
  
      var appPanel = new Ext.Panel({
          id: 'appPanel',
          fullscreen: true,
          dockedItems: dockedItems            
      });
  
  }   // end onReady 
  });
  </code></pre>
  
  <p>Hope someone could lend a hand. Thanks!</p>