Sencha Touch: lista anidada dentro de un panel de pestañas

Question

Todavía soy nuevo en Sencha Touch/ExtJS, y actualmente estoy explorando las demostraciones y comenzando las muestras. Pero tropecé con este problema en el que cuando inserto una lista anidada en los elementos del panel de pestañas ya no puedo navegar por los elementos de la lista.

Aquí está mi código:

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: '<p>test 1</p>' 
      }, 
      { 
       title: 'test2', 
       html: '<p>test 2</p>', 
       dockedItems: nestedList 
      }, 
      { 
       title: 'test3', 
       html: '<p>test 3</p>' 
      }] 
     }     
    ] 

    var appPanel = new Ext.Panel({ 
     id: 'appPanel', 
     fullscreen: true, 
     dockedItems: dockedItems    
    }); 

} // end onReady 
}); 

esperanza alguien puede echar una mano. ¡Gracias!

Answer 1

Este error solo está presente en la versión pre-RC de Sencha Touch. :)

Answer 2

no sé qué versión sencha-touch está utilizando pero en sencha-touch-1.1.0 la navegación es trabajando muy bien y no hay errores son arrojados a la consola, así que intentarlo de nuevo mientras se observa la consola , Creo que ha habido un problema