1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    Italy
    Posts
    12
    Vote Rating
    0
    maje is on a distinguished road

      0  

    Default Unanswered: position panel based on page scrolling

    Unanswered: position panel based on page scrolling


    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!!

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Answers
    1
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    You could use:
    Code:
    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);
    });

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Location
    Italy
    Posts
    12
    Vote Rating
    0
    maje is on a distinguished road

      0  

    Default


    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):

    Code:
    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?

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Answers
    1
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    You will have to use:
    Code:
    win.setPosition(window.scrollX + Ext.lib.Dom.getViewWidth() - 200, window.scrollY + ???);

  5. #5
    Sencha User
    Join Date
    Apr 2010
    Location
    Italy
    Posts
    12
    Vote Rating
    0
    maje is on a distinguished road

      0  

    Default


    Using this code:

    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:

    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(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?

Similar Threads

  1. How to get position of element in Panel relative to page?
    By dbassett74 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 18 Nov 2009, 12:47 PM
  2. Widget position based on Own CSS
    By dhanabalan in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 26 Apr 2009, 10:15 PM
  3. Replies: 0
    Last Post: 14 Mar 2008, 6:57 AM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar