White screen when using setActiveItem
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




White screen when using setActiveItem
===

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



