White screen when using setActiveItem

Question

I have a viewport with two items : an authentication form and a tab panel. In the initComponent method of this viewport I call a function that checks if the user ever entered his login and password.

If not, the authentication form shows up and when he clicks on the log in button the tab panel shows up.

But if, there are stored credentials, I want the app automatically switch to the tab panel.

This is how I wanted to do it :

app.views.Viewport = function (config) {
    Ext.apply(this, config);

    this.user = null; // Setter par le checkLogin !

    this.bottomTabs = new Ext.TabPanel({
        tabBar: { 
            dock: 'bottom',
            layout: { pack: 'center' } 
        }, 
        items:[...],                             
        layout: 'fit',
        cardSwitchAnimation: false,
    });

    this.userLogin = new app.views.UserLogin();

    //constructor
    app.views.Viewport.superclass.constructor.call(this, {
        fullscreen: true,
        layout: 'card',
        cardSwitchAnimation: 'fade',
        items: [
            this.userLogin,
            this.bottomTabs
        ]
    });

};

Ext.extend(app.views.Viewport, Ext.Panel, {
    initComponent: function () {
        app.views.Viewport.superclass.initComponent.call(this);
        this.initialCheck();
    },

    initialCheck: function(){
        console.log('init');
        var credentials = window.localStorage.getItem("neroApp_credentials");
        if (credentials == null || credentials == "reset") {
            console.log('no creds');
            this.setActiveItem(this.userLogin); // ***
        }
        else {
            console.log('creds');
            Ext.Ajax.defaultHeaders = {'Authorization':"Basic " + credentials};
            this.checkLogin();
        }
    },

    checkLogin: function () {
        console.log('checkLogin');
        Ext.Ajax.request({
            url: app.stores.baseAjaxURL + '&jspPage=%2Fajax%2FgetUser.jsp',
            scope: this,
            success: function(response, opts) {
                console.log('success');
                var user = Ext.decode(response.responseText);
                this.user = user;
                this.actualites.actualitesList.refreshActu(this.user, parseInt(window.localStorage.getItem("newsPerLoad")));
                this.setActiveItem(this.bottomTabs, { type: 'fade', duration: 500 });
            },
            failure: function(response, opts) {
                console.log('failure');
            }
        });
    },

    resetLogin: function() {
        window.localStorage.setItem("neroApp_credentials", "reset");
        Ext.Ajax.defaultHeaders = {'Authorization':"Basic RESET_Credentials"};
    }

});

But I'm getting a white screen on startup because of the * line. I'm guessing it is fired too early maybe because the setActiveItem in the checkLogin function works fine.

Anybody has an idea why this setActiveItem fires an error ?

Thanks

Answer 1

Ok, I didn't find out what the problem was even though I'm guessing that firing the setActiveItem within the initComponent isn't good practice, but I'm finally got it working by setting the active item like so :

    initialCheck: function(){
        console.log('init');
        var credentials = window.localStorage.getItem("neroApp_credentials");
        if (credentials == null || credentials == "reset") {
            this.activeItem = this.userLogin;
        }
        else {
            this.activeItem = this.bottomTabs;
            Ext.Ajax.defaultHeaders = {'Authorization':"Basic " + credentials};
            this.checkLogin();
        }
    },