PDA

View Full Version : Panels Z-index



greencavern
12 May 2012, 3:15 PM
Hi all,

I didn't manage to find some code to bring a panel over some others inside a container (window).
I cannot use float components for this (so zindexmanager is not available).

Here is the code simplified in one page to reproduce :



<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all-dev.js"></script>
<script type="text/javascript">
var panel1 = Ext.create('Ext.tab.Panel', {
title:'Panel 1',
html: '<p>I am Panel 1</p>',
x:10,
y:10,
width: 300,
height: 200,
draggable:true
});

var panel2 = Ext.create('Ext.tab.Panel', {
title:'Panel 2',
html: '<p>I am Panel 2</p>',
x:50,
y:50,
width: 300,
height: 200,
draggable:true
});

var window1 = Ext.create('Ext.Window', {
title:'Window 1',
width: 370,
height: 340,
layout: 'absolute',
items: [panel1,panel2],
tbar:[
{
xtype: 'button',
text: 'Bring Panel 2 to top',
handler : function() {
//NEEDED
}
},
{
xtype: 'button',
text: 'Show Panel 2 Position',
handler : function() {
panel2.body.update('Panel 2 z-index is now at : '+ panel2.getEl().getStyle('zIndex'));
console.log(panel2.getEl().getStyle('zIndex'));
}
}
],
renderTo: Ext.getBody()
});

Ext.onReady(function () {
window1.show();
});

</script>
</head>
<body>
</body>
</html>


I would like to know if there is a function i can link to an event (button click or startDrag for example) to bring the second panel over the other one.

The panels z-indexex are not number (value : "Auto") so i cannot play with it.

Thank you for your help !

Philippe