Загрузить другое представление после входа в систему с помощью sencha touch 2.0

У меня глупая проблема, и я бы хотел, чтобы вы мне помогли. Заранее спасибо.

Ситуация следующая: у меня есть 2 вида (оба созданы с помощью sencha architect 2.0), один для входа в систему, а другой для общих целей. И я хотел бы загрузить второе представление об успешном ответе при попытке входа в систему, то есть после любого успешного входа в систему. Основная проблема заключается в том, что я пробовал с Ex.create, Ext.Viewport.add, Ext.Viewport.setActiveItem, но мне не удается отобразить второе представление на экране, экран входа просто остается там, а приложение не загружает другое представление. Другое дело, мне не нужно использовать для этого навигационное представление.

Вот код моего контроллера, из которого я хочу загрузить свой второй вид. И, как вы увидите, я даже создал ссылку на представление с включенным автосозданием и идентификатором «mainTabPanel»:

Ext.define('MyApp.controller.Login', {
extend: 'Ext.app.Controller',
config: {
    refs: {
        loginButton: {
            selector: '#login',
            xtype: 'button'
        },
        username: {
            selector: '#user',
            xtype: 'textfield'
        },
        password: {
            selector: '#pass',
            xtype: 'passwordfield'
        },
        mainTabPanel: {
            selector: '#mainTabPanel',
            xtype: 'tabpanel',
            autoCreate: true
        }
    },

    control: {
        "loginButton": {
            tap: 'onLoginButtonTap'
        }
    }
},

onLoginButtonTap: function(button, e, options) {
    Ext.Ajax.request({
        url: '../../backend/auth.php',

        method: 'POST',

        params: {
            user: this.getUsername().getValue(),
            pass: this.getPassword().getValue()
        },

        success: function(response) {
            var json = Ext.decode(response.responseText);
            if (json.type == 'success') {
                // LOAD THE DAMN SECOND VIEW HERE!
                //var paneltab = Ext.create('MyApp.view.MainTabPanel');
                //Ext.Viewport.add(paneltab);
                //Ext.Viewport.setActiveItem(this.getMainTabPanel());
            } else {
                alert(json.value);
            }
        },

        failure: function(response) {
            alert('The request failed!');
        }
    });
}
});

И вот код моего входа в систему:

Ext.define('MyApp.view.LoginForm', {
extend: 'Ext.form.Panel',

config: {
    id: 'loginForm',
    ui: 'light',
    items: [
        {
            xtype: 'fieldset',
            ui: 'light',
            title: 'Log into the system',
            items: [
                {
                    xtype: 'textfield',
                    id: 'user',
                    label: 'User',
                    name: 'user'
                },
                {
                    xtype: 'passwordfield',
                    id: 'pass',
                    label: 'Pass',
                    name: 'pass'
                }
            ]
        },
        {
            xtype: 'button',
            id: 'login',
            ui: 'confirm',
            text: 'Login'
        }
    ]
}
});

И, наконец, код представления, которое я хочу загрузить. Этот вид загружается нормально, если я устанавливаю его как начальный вид, но не загружается при успешном входе в систему:

Ext.define('MyApp.view.MainTabPanel', {
extend: 'Ext.tab.Panel',

config: {
    id: 'mainTabPanel',
    layout: {
        animation: 'slide',
        type: 'card'
    },
    items: [
        {
            xtype: 'container',
            layout: {
                type: 'vbox'
            },
            title: 'Tab 1',
            iconCls: 'time',
            items: [
                {
                    xtype: 'titlebar',
                    docked: 'top',
                    title: 'General Report',
                    items: [
                        {
                            xtype: 'button',
                            iconCls: 'refresh',
                            iconMask: true,
                            text: '',
                            align: 'right'
                        }
                    ]
                },
                {
                    xtype: 'container',
                    height: 138,
                    flex: 1,
                    items: [
                        {
                            xtype: 'datepickerfield',
                            label: 'From',
                            placeHolder: 'mm/dd/yyyy'
                        },
                        {
                            xtype: 'datepickerfield',
                            label: 'To',
                            placeHolder: 'mm/dd/yyyy'
                        },
                        {
                            xtype: 'numberfield',
                            label: 'Hours'
                        }
                    ]
                },
                {
                    xtype: 'dataview',
                    ui: 'dark',
                    itemTpl: [
                        '<div style="height:50px; background-color: white; margin-bottom: 1px;">',
                        '    <span style="color: #0000FF">{user}</span>',
                        '    <span>{description}</span>',
                        '</div>'
                    ],
                    store: 'hoursStore',
                    flex: 1
                }
            ]
        },
        {
            xtype: 'container',
            title: 'Tab 2',
            iconCls: 'maps'
        },
        {
            xtype: 'container',
            title: 'Tab 3',
            iconCls: 'favorites'
        }
    ],
    tabBar: {
        docked: 'bottom'
    }
}
});

Пожалуйста, мне нужна помощь... :) Я застрял здесь уже как 3 дня и не могу понять, в чем проблема. Спасибо.