Question

Scenario description: I have a border layout with an ExtJS container containing one-to-many windows an a panel (acting as a Taskbar). I want the taskbar to be always on top. If a Window is active and consequently in front, calling toFront does not put it in front as expected.

The ExtJS Windows which remain in front is within the center area of the Border layout, whereas the panel acting as taskbar is within the south area, as follows:

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

where maincontainer and launchpanel extend Ext.container.Container and Ext.panel.Panel respectively. This code is within the main container which is the only item in the ExtJS MVC application’s Viewport.

How do I get the launchpanel to be always in front / on top?

Answer 1

From what I’ve read in the meantime what appears in front is determined by the CSS z-index property.

Then I found this answer about how to set the z-index for a panel. Hence I set the z-index for the Panel each time it is rendered by having the following snippet in the controller:

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

Still, if anyone has a better way of doing the above, please share!