PDA

View Full Version : Position problem of DD Panel



Chap
25 Aug 2009, 7:22 AM
Hi guys,

I encounter a problem about ddpanel, which needs one's help, thanks at the front!

I have two draggable panels, which can dragged into anywhere. But a tricky problem is that when I drag panel1 and position it, and then drag panel2 to the same position. Here, the panel2 will over shielding the panel1 (see the below fig.)

http://www.extjs.com/forum/attachment.php?attachmentid=15891&stc=1&d=1251213661

What I want to is active the panel which I click. That is, if I click panel1, the panel1 will shown at the windows completely, and not shielded by panel2.

what should I do? I copy the code here, Thanks a lot!




init : function(){
var panel1 = new Ext.Panel({
title: 'DD Window 1',
//style: 'padding: 13px 13px 10px 10px',
layout: 'column',
autoScroll: true,
cls: 'x-portal',
name: 'my panel 1',
width: '280px',
border: true,
renderTo: 'newid1',
darggable: true,
html: '<table cellspacing="5" height="150" cellpadding="5">'+
'<tr><td valign="top"><font size="2">'+
'I am the panel 1 that could be dd'+
'</font></td></tr></table>'
});
panel1.render();
new Ext.dd.DDProxy(panel1);
panel1.body.on('mousedown', function(){

});

var panel2 = new Ext.Panel({
title: 'DD Window 2',
//style: 'padding: 13px 13px 10px 10px',
layout: 'column',
autoScroll: true,
cls: 'x-portal',
name: 'my panel 2',
width: '280px',
border: true,
renderTo: 'newid2',
darggable: true,
html: '<table cellspacing="5" height="150" cellpadding="5">'+
'<tr><td valign="top"><font size="2">'+
'I am the panel2 that could be dd'+
'</font></td></tr></table>'
});
panel2.render();
new Ext.dd.DDProxy(panel2);
}

jay@moduscreate.com
25 Aug 2009, 9:30 AM
You're going to have to manage zindexes in order to achieve what you want. The reason it overshadows it is because it's lower in the DOM tre.

Chap
25 Aug 2009, 7:26 PM
You're going to have to manage zindexes in order to achieve what you want. The reason it overshadows it is because it's lower in the DOM tre.

Thanks for your help. I checked the API of Layer, and found that Zindex attribute would manage the layer problem. But It is hardly to get the Layer according to my project, so I check the code of Layer about Zindex usable situation. It set the style of "z-index" of each layer. So I got each panel's body and header, and set style of "z-index" in order to resolve this problem. Surprised to me, the body works fine but the header not. Why not header can not set the attribute of "z-index"? Or another problem would resolved??
http://extjs.com/forum/attachment.php?attachmentid=15903&stc=1&d=1251257125

Chap
26 Aug 2009, 12:38 AM
Oh, I made a mistake! I could get the element of the whole panel to set style. The problem is resolved! Anyway, thanks for you from the bottom of my heart!! ;)