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?