css - 在 Sencha Touch 中隐藏元素但保留 CSS 间距

Question

我在 Sencha Touch 中有一个 View ，其中包含许多不同的标签和按钮。我在我的 custom.css 文件中将它们设置为我希望它们的外观。我想隐藏除一个按钮以外的所有内容，以便在单击按钮时显示元素。我在这些元素中添加了“hidden: true”。但是，CSS 被忽略了，样式很糟糕。有什么办法可以保留 CSS 吗？我看到我可以使用“hiddenCls”，但我不知道如何使用它。有什么想法吗？谢谢!

下面是我目前的代码:

Ext.define('myApp.view.StartScreen', {
extend: 'Ext.Container',
xtype: 'startscreen',

config: {
    layout: {
        type: 'vbox',
        align: 'middle'
    },

    items: [{
        xtype: 'toolbar',
        docked: 'top',
        title: 'My App',
        items: [{
            xtype: 'button',
            iconMask: true,
            iconCls: 'refresh',
            width: 42
        }, { xtype: 'spacer' }, {
            xtype: 'button',
            iconMask: true,
            iconCls: 'user'
        }]
    }, {
        xtype: 'label',
        html: 'Discussions',
        cls: 'item-title-label',
        name: 'itemTitleLabel',
        hidden: true,
        hiddenCls: 'x-item-title-label-hidden'
    }, {
        xtype: 'label',
        html: 'Hi',
        cls: 'case-number-label',
        name: 'caseNumberLabel',
        hidden: true,
        hiddenCls: 'x-case-number-label-hidden'
    }, {
        xtype: 'label',
        html: '0:00',
        cls: 'duration-label',
        name: 'durationLabel',
        hidden: true,
        hiddenCls: 'x-duration-label-hidden'
    }, {
        xtype: 'label',
        html: 'Started at 13:42',
        cls: 'time-started-label',
        name: 'timeStartedLabel',
        hidden: true,
        hiddenCls: 'x-time-started-label-hidden'
    }, {
        xtype: 'button',
        text: 'Start',
        ui: 'confirm',
        cls: 'big-start-button',
        name: 'bigStartButton'
    }, {
        xtype: 'button',
        text: 'Off',
        ui: 'decline',
        cls: 'big-off-button',
        name: 'bigOffButton',
        hidden: true,
        hiddenCls: 'x-off-button-hidden'
    }]
}

});

Answer 1

尝试在要隐藏的元素上使用 css 属性 visiibility，如 visibility:hidden。