Sencha Touch - Viewport Problem

i am using the ToolbarDemo and the ListDemo from Drew Neil (@nelstrom)! Everything works perfect! But there is one problem with the VIEWPORT - i think!

here is my code:

http://www.sencha.com/forum/showthread.php?132823-Viewport-Problem

I hope anyone can help me! Thanks!

---------------------------

EDIT: thank you mistagrooves for your quick answer! but now i get this error (Line 33):

TypeError: Result of expression 'ToolbarDemo.views.Viewport.setActiveItem' [undefined] is not a function.

my code:

ToolbarDemo.views.detailPanel = Ext.extend(Ext.Panel, {
        id: 'detailpanel',
        tpl: ['<div class="live">',
                        '<div style="float:right;padding-right: 10px;padding-bottom: 10px;">{titel}</div>',
                        '<div style="text-align:center; margin-left: auto; margin-right: auto;">',
                        '<video width="280" height="280" x-webkit-airplay="allow" poster="playlive.png" controls="controls" id="video_player" style="" tabindex="0"><source src="{video}"></source></video>',
                        '</div>'],
        dockedItems: [
            {
                xtype: 'toolbar',
                items: [{
                    text: 'zur&uuml;ck',
                    ui: 'back',
                    handler: function() {
                        ToolbarDemo.views.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
                    }
                }]
            }
        ]
    });

ToolbarDemo.views.Beitrage = Ext.extend(Ext.List, {
title: "Beitr&auml;ge",
iconCls: "btnbeitraege",
id: 'disclosurelist',
        store: storeXML,
        itemTpl: '<div class="contact"><img src="{bild}" width="48" height="26" border="0"/> {titel}</div>',
        grouped: true,
        onItemDisclosure: function(record, btn, index) {
        var details = Ext.getCmp('detailpanel');
        details.update(record.data);
        //this is ok because Viewport is an object
        ToolbarDemo.views.Viewport.setActiveItem('detailpanel');
 } 
});

ToolbarDemo.views.Viewport = new Ext.Panel ({
        fullscreen: true,
        cardSwitchAnimation: 'slide',
        开发者_C百科items: [new ToolbarDemo.views.Beitrage(), new ToolbarDemo.views.detailPanel()]
    });

storeXML.load();
Ext.reg('beitrage', ToolbarDemo.views.Beitrage);

i hope anyone can help! thank you!

The problem is that you haven't created anything via 'new'. Essentially you are playing with the classes instead of the objects. ToolbarDemo.views.detailPanel is a Class and not an Panel Object therefore you have to create it before you are able to use it.

You've done it (or copied it) as part of the initialization of the main Viewport:

ToolbarDemo.views.Viewport = new Ext.Panel ({
        fullscreen: true,
        layout: 'card',
        cardSwitchAnimation: 'slide',
        items: [new ToolbarDemo.views.Beitrage(), new ToolbarDemo.views.detailPanel()]
    });

Inside your disclosure function you could do something like:

    onItemDisclosure: function(record, btn, index) {
            var details = Ext.getCmp('detailpanel');
            details.update(record.data);
            //this is ok because Viewport is an object
            ToolbarDemo.views.Viewport.setActiveItem('detailpanel');
        }