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

Question

我在Sencha Touch中有一个视图，其中包含许多不同的标签和按钮。 我已经在我的custom.css文件中为它们设置了样式，以使其看起来像。 我想隐藏除一个按钮以外的所有内容，以便单击该按钮时，将显示元素。 我在这些元素上添加了“隐藏：真实”。 但是，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属性的visibility:hidden ，如visiibility visibility:hidden 。