Белый экран при использовании setActiveItem

Question

У меня есть окно просмотра с двумя элементами: форма проверки подлинности и панель вкладок. В методе initComponent этого окна просмотра я вызываю функцию, которая проверяет, когда пользователь когда-либо вводил свой логин и пароль.

Если нет, отображается форма аутентификации, и когда он нажимает кнопку входа в систему, появляется панель вкладок.

Но если хранятся учетные данные, я хочу, чтобы приложение автоматически переключалось на панель вкладок.

Это, как я хотел бы сделать это:

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"}; 
    } 

}); 

Но я получаю белый экран при запуске из-за линии *. Я предполагаю, что он запущен слишком рано, возможно, потому что функция setActiveItem в функции checkLogin работает нормально.

У кого-нибудь есть идея, почему этот setActiveItem вызывает ошибку?

Благодаря

Answer 1

Хорошо, я не нашел, что эта проблема, хотя я предполагаю, что обжиг setActiveItem внутри InitComponent не является хорошей практикой, но я, наконец, получил это работает, установив активный элемент, такой как:

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(); 
     } 
    },