extjs - examples - sencha touch download

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 me encontré 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 
});

Espero que alguien pueda 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 de sencha-touch está utilizando, pero en sencha-touch-1.1.0 la navegación funciona muy bien y no se generan errores en la consola, intente de nuevo mientras observa la consola, creo ha habido un problema