position panel based on page scrolling

[maje]

Hi everybody!

I've a problem: I would create a panel or a window that follows the page scrolling. When I scroll down the page, the panel position goes down with the scroll, when I scroll up the page, the panel position goes up....How can obtain this effect?

Thanks!!

[Condor]

You could use:

var w = new Ext.Window({
title: 'Hello',
x: 100,
y: 100,
width: 200,
height: 100
}).show();

Ext.EventManager.on(window, 'scroll', function(){
w.setPosition(window.scrollX + 100, window.scrollY + 100);
});

[maje]

thank you so much condor! :)

I've already tried something similar, but I'm not be able to "bind" the window inside a div: I tried with the 'renderTo' config, but it doesn't work. I think the problem is in the x, y settings. My div is on the right of the page, instead now it appears on the left (I think because of x,y = 100):



var win = new Ext.Window({
title: 'Shop cart',
id: 'schopcart',
width: 200,
autoHeight: true,
closable: false,
collapsible: true,
draggable: false,
monitorResize: true,
renderTo: 'containerColRightSide'
});
win.show();

Ext.EventManager.on(window, 'scroll', function(){
win.setPosition(window.scrollX + 100, window.scrollY + 100);
});


Can you help me? ;)

[Condor]

You will have to use:

win.setPosition(window.scrollX + Ext.lib.Dom.getViewWidth() - 200, window.scrollY + ???);

[maje]

Using this code:



var win = new Ext.Window({
title: 'Carrello',
id: 'carrello',
width: 200,
autoHeight: true,
closable: false,
collapsible: true,
draggable: false,
monitorResize: true,
renderTo: 'containerColRightSide'
});
win.show();

Ext.EventManager.on(window, 'scroll', function(){
win.setPosition(window.scrollX + Ext.lib.Dom.getViewWidth() - 200, window.scrollY + 100);
});
the problem is that vertical scroll doesn't work, instead horizontal scroll moves the shop cart window more and more on the right :(

I've tried this solution:



var win = new Ext.Window({
title: 'Carrello',
id: 'carrello',
width: 200,
autoHeight: true,
closable: false,
collapsible: true,
draggable: false,
monitorResize: true,
renderTo: 'containerColRightSide'
});
win.show();

Ext.EventManager.on(window, 'scroll', function(){
win.setPosition(Ext.lib.Dom.getViewWidth() - 700, window.scrollY + 100);
});
and vertical scroll works again, but if I resize my web page the shop cart window moves in the center of the page. Probably I should use something that returns a X position proportional to the page dimension, right?