有没有办法在呈现特定视图时隐藏容器项？

Question

我尝试使用 ext js 制作现代桌面 Web 应用程序。应用程序的主视图有 4 个子视图：菜单、页眉、页脚和中心视图。我想在显示下面的登录视图时隐藏它们。但我不知道该使用哪个技巧。

Ext.define('App.view.auth.Login', {
    extend: 'Ext.Container',
    xtype: 'authlogin',

    controller: 'authlogin',

    cls: 'auth-login',

    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'center'
    },

    items: [{
        cls: 'auth-header',
        html:
            '<span class="logo x-fa fa-circle-o-notch"></span>'+
            '<div class="title">Coworkee</div>'+
            '<div class="caption">Employee directory</div>'
    }, {
        xtype: 'formpanel',
        reference: 'form',
        layout: 'vbox',
        ui: 'auth',

        items: [{
            xtype: 'textfield',
            name: 'username',
            placeholder: 'Username',
            required: true
        }, {
            xtype: 'passwordfield',
            name: 'password',
            placeholder: 'Password',
            required: true
        }, {
            xtype: 'button',
            text: 'LOG IN',
            iconAlign: 'right',
            iconCls: 'x-fa fa-angle-right',
            handler: 'onLoginTap',
            ui: 'action'
        }]
    }, {
        cls: 'auth-footer',
        html:
            '<div>Ext JS example</div>'+
            '<a href="http://www.sencha.com" target="_blank">'+
                '<span class="logo ext ext-sencha"></span>'+
                '<span class="label">Sencha</span>'+
            '</a>'
    }]
});

Answer 1

是的，路由是最好的策略，但如果您不想使用它，您可以创建一个函数，该函数根据用户的登录状态返回布尔值。然后，您可以将该登录状态与任何视图的 hidden 属性绑定，这可以解决问题。