Sencha Touch: Nested List inside a Tab Panel

Question

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.

Here's my 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: '<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 
});

Hope someone could lend a hand. Thanks!

Answer 1

This bug is only present on the pre-RC version of Sencha Touch. :)

Answer 2

I don't know which version sencha-touch you are using but in sencha-touch-1.1.0 the navigation is working very well and there are no errors are thrown to the console,so try it again while observing your console ,i think there has be a problem