标题栏内容在 chrome 中变为空白/不可见

Posted 2023-02-26

【中文标题】标题栏内容在 chrome 中变为空白/不可见

【英文标题】：Title bar contents becomes blank/invisible in chrome

【发布时间】：2017-12-07 11:36:10

【问题描述】：

Ext JS：版本 6.5.2.463 主题经典 (6.2.1.167) 浏览器：Chrome 版本 62.0.3202.94（64 位） 操作系统：Window 10（64 位）

几天前，我像往常一样启动我的应用程序，但是当我在 Chrome 中打开已经折叠的面板时，它的标题栏文本为空白时遇到了一个尴尬的行为。我尝试在另一个浏览器上运行良好。 我在另一台机器上试过它在那里工作正常。但是当其他机器的 Chrome 更新时，同样的问题也存在。 我们将 Ext JS 版本从 6.2.1.167(Classic) 更新到 6.5.2.463(Classic)，但问题仍然存在。 我们在小提琴上创建了类似的 UI，并附上了链接。所以你可以验证它。 https://fiddle.sencha.com/#fiddle/2acg&view/editor 还有其他人面临同样的问题吗？ 要重现该问题： 1.打开小提琴的链接。 2. 单击展开按钮，将显示标题栏内容。 3.现在点击折叠然后展开现在内容将消失。

还附上了截图。 title bar is blank there

【问题讨论】：

无法重现，在 Windows 10 Enterprise（64 位）上使用 Chrome 62.0.3202.94（64 位）。在 6.5.2 和 6.2.1 中都没有

如果您要求我可以将视频发送给您，请附上屏幕截图作为证明。

【参考方案1】：

您需要使用此配置 collapseMode 以及 collapseMode 的代码文件。

在这个 FIDDLE 中，我使用了您的代码并根据您的要求进行了一些更改。希望这将帮助您或指导您解决问题。

Ext.create('Ext.panel.Panel', 
    plugins: 'viewport',
    title: 'ViewPort Title',
    layout: 'fit',
    tbar: [
        xtype: 'button',
        text: 'Expand',
        handler: function () 
            var panel = this.up('panel').down('#bottomPanel');
            panel.collapseMode = undefined;
            panel.expand();
        
    , 
        xtype: 'button',
        text: 'Collapse',
        handler: function () 
            this.up('panel').down('#bottomPanel').collapse();
        
    ],
    items: [
        xtype: 'container',
        layout: 'border',
        items: [
            xtype: 'panel',
            title: 'Center Panel Title',
            region: 'center',
            html: 'Sample center panel text'
        , 
            xtype: 'panel',
            itemId: 'bottomPanel',
            title: 'Bottom Panel Title',
            region: 'south',
            height: 150,
            collapsible: true,
            collapseMode: 'mini',
            collapsed: true,
            layout: 'fit',
            items: [
                xtype: 'panel',
                html: 'Sample bottom inner panel text'
            ]
        ]
    ]
);

【讨论】：

在 chrome 的最新更新中已修复。现在它工作正常。谢谢

是的，我在Version 63.0.3239.84 (Official Build) (64-bit) 中检查了您的fiddle 工作正常，但如果有人遇到同样的问题，他们将应用此solution。