SenchTouch onItemDisclosure load detailed view problem

I'm trying to get my test project working and have it set out with various viewports js files for each screen. I have now managed to load the data onto the screen with the code below however I am struggling with trying to set-up the onItemDisclosure function so that it switches to a detailed view which shows more information about the selection item.

MobileApp.views.Settings_screen = Ext.extend(Ext.Panel, {

    title: "Settings    ",
    iconCls: "settings", 
    fullscreen: true,
    layout: 'card', 

    dockedItems: [{
        xtype: "toolbar",
        title: "Settings"
    }],

    initComponent: function() { 

        detailPanel = new Ext.Panel({
            id: 'detailPanel',
            tpl: 'Hello, World'
        }), 


        this.list = new Ext.List({
            id: 'indexlist',
            store: MobileApp.listStore,
            itemTpl: '<div class="contact">{firstName} {lastName}</div>',
            grouped: false,
            onItemDisclosure: function() {
                MobileApp.views.setActiveItem('detailPanel');
            }
        });

        this.items开发者_开发百科 = [this.list];   

        MobileApp.views.Settings_screen.superclass.initComponent.apply(this, arguments);

    }

});

Ext.reg('settings_screen', MobileApp.views.Settings_screen);

I have tried to put some code here to switch to the detailPanel but it comes up with an undefined error.

onItemDisclosure: function() {
    MobileApp.views.setActiveItem('detailPanel');
}

Thanks Aaron

You need to define this panel under Settings_screen's namespace, like this:

this.detailPanel = new Ext.Panel({
        id: 'detailPanel',
        tpl: 'Hello, World'
    }), 

Also, you need to add the detailPanel to the Settings_screen's items, so that it will become an item of it.

this.items = [this.list, this.detailPanel];