Sencha Touch List Component Inside Tabbed Toolbar

Question

I am working with the Sencha touch framework and there list item component. I have only been working with this for about 2 weeks now and I can not figure out how to get the "onItemDisclosure" to open up the "detailPanel". I am trying to follow this example: http://vimeo.com/19245335 . I have pasted my code below. Any help is very much appreciated.

    GoW3Guide.views.detailPanel = Ext.extend(Ext.Panel, {
        id: 'detailpanel',
        tpl: 'Hello, {firstName}!',
        dockedItems: [
            {
                xtype: 'toolbar',
                items: [{
                    text: 'back',
                    ui: 'back',
                    handler: function() {
                        GoW3Guide.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
                    }
                }]
            }
        ]
    });

    Ext.reg('detailPanel', GoW3Guide.views.detailPanel);


    GoW3Guide.views.listPanel = Ext.extend(Ext.List, {
        id: 'disclosurelist',
        store: GoW3Guide.ListStore,
        itemTpl: '<div class="contact">{firstName} {lastName}</div>',
        grouped: true,
        onItemDisclosure: function(record, btn, index) {
            GoW3Guide.views.detailPanel.update(record.data);
            GoW3Guide.views.Guidescard.setActiveItem('detailpanel');
        }
    });

    Ext.reg('listPanel', GoW3Guide.views.listPanel);



    GoW3Guide.views.Guidescard = Ext.extend(Ext.Panel, {
        fullscreen: true,
        layout: 'card',
        cardSwitchAnimation: 'slide',
        initComponent: function() {
            Ext.apply(this, {
                items: [GoW3Guide.views.listPanel, GoW3Guide.views.detailPanel]
            });
            GoW3Guide.views.Guidescard.superclass.initComponent.apply(this, arguments);
        }
    });
    Ext.reg('guidescard', GoW3Guide.views.Guidescard);

Answer 1

Are you getting any javascript errors?

According to the docs setActiveItem either needs a component instance, a number (card index), or a config object, eg {xtype:'detailPanel'}

If you want to make a new detail panel active try

GoW3Guide.views.Guidescard.setActiveItem({xtype:'detailpanel'});

or

GoW3Guide.views.Guidescard.setActiveItem(new GoW3Guide.views.detailPanel());