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

});

但由于 * 行，我在启动时遇到了白屏。我猜它太早了，可能因为checkLogin函数中的setActiveItem工作正常。

任何人都知道为什么这个setActiveItem会触发错误？

由于

Answer 1

好吧，我没有发现问题是什么，即使我猜测在initComponent中触发setActiveItem并不是一个好习惯，但我终于通过设置活动项来实现它：

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

使用setActiveItem时出现白屏

1 个答案: