ExtJS面板总是“在前面”/总是“在上面”

ExtJS Panel always "in front" / always "on top"

本文关键字：在上面 在前面 总是 ExtJS      更新时间：2023-11-03

场景描述：我有一个边框布局，其中包含一个包含一对多窗口和面板(充当任务栏(的 ExtJS 容器。我希望任务栏始终位于顶部。如果窗口处于活动状态并因此位于前面，则调用 toFront 不会按预期将其放在前面。

保留在前面的 ExtJS 窗口位于边框布局的center区域内，而充当任务栏的面板位于south区域内，如下所示：

items: [
        { 
            xtype: 'maincontainer', id:'maincontainer',
            region : 'center'
        },
        {
            xtype: 'launchpanel', id:'launchpanel', 
            region: 'south',
            collapsible : true,
        }        
],

其中maincontainer和launchpanel分别延伸Ext.container.Container和Ext.panel.Panel。此代码位于主容器中，该容器是 ExtJS MVC 应用程序Viewport中的唯一项。

如何让launchpanel始终在前面/顶部？

从我在此期间阅读的内容来看，前面显示的内容由 CSS z-index 属性决定。

然后我找到了关于如何为面板设置 z 索引的答案。因此，我通过在控制器中使用以下代码片段来设置每次渲染面板的 z 索引：

'launchpanel': {
    expand: function(panel) { 
        panel.getEl().setStyle('z-index','80000');
    },
...

不过，如果有人有更好的方法来做上述事情，请分享！

相关文章：