How many levels can the item tap event handle?

[ClintPick]

The code below shows how to add tap event to a list. I would like to know if it would be possible to add a third level i.e. a second itemtap event to "var detail". If it's possible how could it be done? Also, is it a good idea in terms of resources, to implement a navigation using tap event?

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function(){
        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });
        
        var list = new Ext.List({
            tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
            itemSelector: 'div.contact',
            
            singleSelect: true,
            
            store: new Ext.data.Store({
                model: 'Contact',
                
                getGroupString: function(record){
                    return record.get('firstName')[0];
                },
                
                data: [{
                    firstName: 'Tommy',
                    lastName: 'Maintz'
                }, {
                    firstName: 'Ed',
                    lastName: 'Spencer'
                }, {
                    firstName: 'Jamie',
                    lastName: 'Avins'
                }, {
                    firstName: 'Aaron',
                    lastName: 'Conran'
                }]
            }),
            listeners: {
                itemtap: function(view, index, item, e){
                    var rec =  view.store.getAt(index);
                    main.setCard(1);
                    detail.update({
                        firstName: rec.get('firstName'),
                        lastName: rec.get('lastName')
                    });
                }
            }
        });
        
        var detail = new Ext.Panel({
            tpl: '<tpl for=".">First: {firstName}<br />Last: {lastName}</tpl>',
            dockedItems: [{
                dock: 'top',
                xtype: 'toolbar',
                items: [{
                    text: 'Back',
                    handler: function(){
                        main.setCard(0);
                    }
                }]
            }],
        });
        
        var main = new Ext.Container({
            fullscreen: true,
            layout: 'card',
            items:[list, detail]
        }).show();
    }
});

[evant]

Detail doesn't have an itemtap event, because it's not a list. In this case though, why would you want an item tap, since there's only ever going to be one item. You can simplify your template:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function(){
        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });
        
        var list = new Ext.List({
            tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
            itemSelector: 'div.contact',
            
            singleSelect: true,
            
            store: new Ext.data.Store({
                model: 'Contact',
                
                getGroupString: function(record){
                    return record.get('firstName')[0];
                },
                
                data: [{
                    firstName: 'Tommy',
                    lastName: 'Maintz'
                }, {
                    firstName: 'Ed',
                    lastName: 'Spencer'
                }, {
                    firstName: 'Jamie',
                    lastName: 'Avins'
                }, {
                    firstName: 'Aaron',
                    lastName: 'Conran'
                }]
            }),
            listeners: {
                itemtap: function(view, index, item, e){
                    var rec = view.store.getAt(index);
                    main.setCard(1);
                    detail.update({
                        firstName: rec.get('firstName'),
                        lastName: rec.get('lastName')
                    });
                }
            }
        });
        
        var detail = new Ext.Panel({
            tpl: 'First: {firstName}<br />Last: {lastName}',
            listeners: {
                afterrender: function(c){
                    c.body.on('tap', function(){
                        alert('Third level. Perhaps an underwater level?');    
                    });
                }
            },
            dockedItems: [{
                dock: 'top',
                xtype: 'toolbar',
                items: [{
                    text: 'Back',
                    handler: function(){
                        main.setCard(0);
                    }
                }]
            }],
        });
        
        var main = new Ext.Container({
            fullscreen: true,
            layout: 'card',
            items:[list, detail]
        }).show();
    }
});

[ClintPick]

I'm sorry. i guess I phrased my question improperly. What i basically wanted to find out was whether it would be possible to have a second list in detail and then have a another list once an item is selected and then have a detail card once an item in that list is clicked. If not what would be the best way to implement such behaviour. A nested list that links to a json store would be ideal.

sort of like:

item list->select item1->item 1 list -> item 1 list item detail