Getting blank screen in sencha touch 2 for viewport??

[arindam.hit]

Hi,

In my app, i am adding a viewport. On that, i am trying to add the screens and move from one to another. Here is my screens:

app.js

Ext.Loader.setConfig({    enabled : true
});


Ext.application({
    views : [ 'viewport', 'TitlePanel', 'dashboardpanel'],
    models : [ 'MyModel', 'wishlistmodel' ],
    stores : [ 'name', 'wishlistsummarystore' ],
    name : 'MyApp',
    controllers : [ 'MyController' ],


    launch : function() {
        console.log('Launchcald');
       Ext.create('MyApp.view.viewport', {
            fullscreen : true
        });
    }



});

TitlePanel.js

Ext.define('MyApp.view.TitlePanel', {    extend: 'Ext.Panel',
    xtype: 'loginPage',
    config: {
        ui: 'light',
        items: [
            {
                xtype: 'panel',
                id: 'LoginScreen',
                items: [
                    {
                        xtype: 'image',
                        docked: 'left',
                        height: 130,
                        id: 'Logoimage',
                        ui: '',
                        width: 170,
                        src: 'app/images/logo.png'
                    },
                    {
                        xtype: 'titlebar',
                        cls: 'mytitlebar',
                        docked: 'top',
                        height: 100,
                        ui: 'blue',
                        items: [
                            {
                                xtype: 'label',
                                height: 36,
                                html: 'Teritree Business Portal',
                                id: 'title',
                                margin: 20,
                                style: 'font: normal Bold 20px droid sans; color:#AB3951',
                                width: 396
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        id: 'LoginPanel',
                        layout: {
                            align: 'center',
                            type: 'vbox'
                        },
                        items: [
                            {
                                xtype: 'label',
                                html: 'Login with Teritree Business Credentials',
                                id: 'Loginlabel',
                                margin: 20,
                                style: 'font: normal Bold 30px droid sans',
                                ui: 'dark'
                            },
                            {
                                xtype: 'fieldset',
                                height: 84,
                                itemId: 'LoginField',
                                margin: '40 0 0 0',
                                width: 500,
                                items: [
                                    {
                                        xtype: 'textfield',
                                        id: 'user',
                                        style: 'font: Droid Sans',
                                        label: 'Login User id',
                                        labelWidth: '40%'
                                    },
                                    {
                                        xtype: 'textfield',
                                        height: 35,
                                        id: 'password',
                                        label: 'Password',
                                        labelWidth: '40%'
                                    }
                                ]
                            },
                            {
                                xtype: 'button',
                                height: 40,
                                id: 'LoginBtn',
                                margin: 20,
                                ui: 'orange',
                                width: 180,
                                text: 'Login'
                            },
                            {
                                xtype: 'label',
                                html: 'If you don\'t have an account yet: Signup at <a href="url">business.teritree.com</a> ',
                                id: 'signup',
                                margin: 20,
                                style: 'font: normal 24px droid sans'
                            }
                        ]
                    }
                ]
            }
          ]
        }

    });

viewport.js

Ext.define('MyApp.view.viewport', {    extend : 'Ext.viewport.Default',
    xtype : 'viewport',
    config : {
        fullscreen : true,
        layout : 'card',
        autoDestroy : false,
        cardSwitchAnimation : 'slide',
        items : [ {
            xtype : 'loginPage'


        }, {
            xtype : 'dashboardpage'


        } ]
    }

});

But unable to see any screens. What i am doing wrong so that my first screen will be TitlePanel.

Please help.

[mitchellsimoens]

You shouldn't extend Ext.viewport.Default and you really don't need your own viewport. Ext.Viewport is always going to be instantiated and when you create a component with fullscreen set to true you are actually just adding that component to Ext.Viewport. Ext.Viewport is just a Container using card layout (by default)