javascript - ExtJS 面板总是 "in front"/总是 "on top"

Question

场景描述:我有一个带有 ExtJS 容器的边框布局，其中包含一个面板(充当任务栏)的一对多窗口。我希望任务栏总是在最前面。如果一个窗口事件并因此在前面，调用toFront没有按预期放在前面。

ExtJS Windows留在前面的是 Border layout 的 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 始终位于前面/顶部？

Answer 1

根据我同时阅读的内容，出现在前面的内容是由 CSS z-index 决定的属性(property)。

然后我找到了这个answer关于如何为面板设置 z-index。因此，每次在 Controller 中添加以下代码片段时，我都会为面板设置 z-index:

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

不过，如果有人有更好的方法来完成上述操作，请分享!