Question

在之前版本的Sencha Architect 2中，没有问题。我刚刚升级到Sencha Architect 3，我似乎无法填充浏览器屏幕。 enter image description here

我的网络有一个视口。里面有一个背景的容器。但通常它会填满整个浏览器，但在这种情况下它不会。 Container无法填满所有浏览器高度，它只是中途停止。以下是Viewport的一些代码：

Ext.define('QuickDecisionExtJS.view.AppViewport', {
    extend: 'Ext.container.Viewport',

    id: 'AppView',
    layout: {
        type: 'card'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'container',
                    cls: 'loginBackground',
                    id: 'LoginView',
                    items: [
                        {
                            xtype: 'form',
                            cls: 'loginForm',
                            frame: true,
                            id: 'frmLogin',
                            width: 450,
                            defaults: {
                                anchor: '100%'
                            },
                            bodyPadding: '5px',
                            icon: 'resources/Start.png',
                            title: 'Đăng nhập hệ thống'
                        },
                        {
                            xtype: 'image',
                            id: 'imgLogin',
                            src: 'resources/QuickDecision.png'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

我的网站有两个视图，一个是登录视图，另一个是主视图，每个视图都有自己的背景。这就是我为登录容器添加CSS类的原因。我使用Sencha海王星主题。无论如何要解决这个问题？它与CSS有什么关系吗？我将发布一些CSS以防万一：

.loginBackground {
    background-image: url('resources/white-metro.jpg');
    background-size: 100% 100%;
}
.loginForm {
    margin: 15% auto;
}

Answer 1

我认为这种情况正在发生，因为应用.loginBackground类的div不是完全拉伸的。对于真正完全拉伸的背景，我将删除loginBackground类，以支持以下定义：

body {
    background-image: url('resources/white-metro.jpg');
    background-size: 100% 100%;
}

然后，您可以完全删除'loginBackground'容器，因为它似乎只是额外的嵌套，默认情况下视口将呈现给页面的<body>元素。

ExtJS全屏容器无法正常工作

1 个答案: