Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Smooth-scrolling panel implementation

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    33

    Default Smooth-scrolling panel implementation

    I'm a newer user and am trying to learn enough to implement a simple web app. One of my interface requirements is an 800x600 panel with no decoration that has to smooth scroll vertically like the credits at the end of a movie. The intention is to open this is a new browser window and full-screen the window to show on a projector.

    Is there an Ext JS way of doing this or should I write some custom code? I've been searching the forums but have not found anything like this.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Posts
    33

    Default

    Well, here is what I tried. It doesn't work--no scrolling takes place. Since this is my first Ext script, I am sort of wondering what to do next. Any pointers on where to look for debug tips?

    Thanks.

    Code:
    scroller = {
    
        initialDelay: 2000,
        interval: 1,
        scrollEnable: 1,
        actualHeight: '',
        task: {
            run: this.update,
            interval: this.interval * 50
        },
    
        initialize: function() {
            scroll_div = Ext.get('scroll');
            scroll_div.style.top = 0;
            divHeight = Ext.get('scroll_div_wrapper').offsetHeight;
            actualHeight = scroll_div.offsetHeight;
            this.run();
        },
        
        update: function() {
            if (parseInt(scroll_div.style.top) > (8 - actualHeight)) {
                scroll_div.style.top = parseInt(scroll_div.style.top) - speed + "px";
            }
            else {
                scroll_div.style.top = parseInt(divHeight) + 8 + "px";
            }
        },
        
        run: function() {
            Ext.TaskMgr.start(this.task)
        },
    
        stop: function() {
            Ext.TaskMgr.stop(this.task)
        },
        
        setInterval: function(interval) {
            this.interval = interval;
        }
    }
    
    Ext.onReady(function() {
        scroller.initialize();
    });

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Posts
    33

    Default

    I got Firebug! Pretty cool stuff. A bit buggy though (like my code) .

    I found a few bugs and converted some style manipulation code into the Ext way of doing it (ie. "scroll_div.style.top = 0" => "scroll_div.setTop = 0").

    Now the code looks like this:

    Code:
    scroller = {
    
        initialDelay: 2000,
        interval: 1,
        scrollEnable: 1,
        actualHeight: '',
        scrollOffset: 0,
        scroll_div: '',
        scroll_div_wrapper: '',
    
        initialize: function() {
            debugger;
            this.scroll_div = Ext.get('scroll_div');
            this.scroll_div.setTop = 0;
            this.scroll_div_wrapper = Ext.get('scroll_div_wrapper');
            this.run();
        },
        
        update: function() {
            console.log("updating...");
            this.scroll_div.setTop -= 10;
        },
        
        task: {
            run: this.update,
            interval: this.interval * 50
        },
    
        run: function() {
            Ext.TaskMgr.start(this.task)
        },
    
        stop: function() {
            Ext.TaskMgr.stop(this.task)
        },
        
        setInterval: function(interval) {
            this.interval = interval;
        }
    }
    
    Ext.onReady(function() {
        scroller.initialize();
    });
    It seems that the task is not running. I say this because I can trace the code all the way through the run method and the console never shows any updating messages. Can anyone see a problem with my code, particularly the task setup?

    Many thanks.

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Think about what "this" refers to when the functions execute.

    this.task contains two things: a function and a number. When TaskManager calls that function, how does it guess what scope (this) to call it with?

    Back to the API docs.

  7. #7
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265

    Default

    Have a look at http://www.extjs.com/forum/showthrea...329#post382329

    This might give some idea.

  8. #8
    Sencha User
    Join Date
    Jan 2008
    Posts
    33

    Default

    Thanks to you both.

    I have the code now as:

    Code:
    scroller = {
    
        initialDelay: 2000,
        interval: 1,
        scrollEnable: 1,
        actualHeight: '',
        scrollOffset: 0,
        scroll_div: '',
        scroll_div_wrapper: '',
        task: {},
    
        initialize: function() {
            debugger;
            this.scroll_div = Ext.get('scroll_div');
            this.scroll_div.setTop = 0;
            this.scroll_div_wrapper = Ext.get('scroll_div_wrapper');
            this.task = {
                run: this.update,
                interval: this.interval * 50,
                scope: scroller
            }
            this.run();
        },
        
        update: function() {
            console.log("updating...");
            this.scroll_div.setTop -= 10;
        },
    
        run: function() {
            Ext.TaskMgr.start(this.task)
        },
    
        stop: function() {
            Ext.TaskMgr.stop(this.task)
        },
        
        setInterval: function(interval) {
            this.interval = interval;
        }
    }
    
    Ext.onReady(function() {
        scroller.initialize();
    });
    Still doesn't work. I reviewed this post to try to gain a better understanding since I don't have much experience with JS or Ext. I followed Animal's advice and read this where I saw that I should try to include the scope of the object literal containing my junk. Don't know what to try next. Firebug shows the scope as my object when I call TaskMgr so I don't get it.

    I will review the example you provided. Thanks.

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    What does Ext.get return?

    Will setting a scrollTop property in it do anything?

  10. #10
    Sencha User
    Join Date
    Jan 2008
    Posts
    33

    Default

    Well, Animal, I'm back. You helped me understand that my JS skills were not spiffy.

    Since my last post, I have:

    1. Watched all of Douglas Crockford's videos.
    2. Purchased and read Javascript: The Good Parts.
    3. Studied design patterns from various sources on the net.
    4. Repeatedly revised my code.
    5. Studied the Ext Core API documentation which is actually pretty good.

    Although I really liked durlabh's posted code, I wanted to do it myself and my app is distinctly different from his.

    I'm still a newbie JS hack but want to thank you for the challenges along the way. I'll probably be back for more.

    Here's my code. If you see any opportunities for improvement, I would like to hear them.

    Code:
    Ext.namespace('Bitworks');
    
    // the scroller object implements a window scroller
    Bitworks.scroller = (function() {
    
        var
        step = 1,                // the amount (px) to shift
        enabled = 1,             // the enable state of the scroller
        scrollDelay = 50,        // the delay (ms) between scroll shifts
        scrollDelayDelta = 5,    // the amount to inc/dec the scrollDelay
        initialDelay = 2000,     // the delay (ms) before initial scrolling
        divHeight = 0,           // the height (px) of the display window
        scrollToOffset = 50,     // the offset (px) from the top of the scroll
                                 // window when scrollToId is called
        scrollDiv = null,        // the div that holds the content and scrolls
    
        // scrolls the scroll div and sets up for the next period
        scroll = function() {
            var top;
            top = scrollDiv.getTop();
    
            if (top > (-scrollDiv.getHeight())) {
                scrollDiv.setTop(top - step);
            }
            else {
                scrollDiv.setTop(divHeight);
            }
    
            if (enabled) {
                setTimeout(scroll, scrollDelay);
            }
        },
        
        // initializes the scroll div and the scroll div wrapper
        initialize = function() {
            divHeight = Ext.fly('scroll_div_wrapper').getHeight();
    
            scrollDiv = Ext.get('scroll_div');
            scrollDiv.setTop(0);
            setTimeout(scroll, initialDelay);  // start scrolling
        },
    
        // enables scrolling
        enable = function() {
            if (!enabled) {
                enabled = 1;
                setTimeout(scroll, scrollDelay);
            }
        },
        
        // disables scrolling
        disable = function() {
            enabled = 0;
        },
       
        // makes the scrolling faster by the scroll delay delta
        faster = function() {
            if (scrollDelay > 25) {
                scrollDelay -= scrollDelayDelta;
                return 1;
            }
            else {
                return 0;
            }
        },
       
        // makes the scrolling slower by the scroll delay delta
        slower = function() {
            if (scrollDelay < 100) {
                scrollDelay += scrollDelayDelta;
                return 1;
            }
            else {
                return 0;
            }
        },
       
        // sets the shift amount (px)
        setStep = function(s) {
            step = s;
        },
    
        // gets the scroll delay
        getScrollDelay = function() {
            return scrollDelay;
        },
       
        // sets the scroll delay
        setScrollDelay = function(d) {
            scrollDelay = d;
        },
    
        // scrolls the scroll div to the the position of the specfied id
        scrollToId = function(id) {
            scrollDiv.setTop(scrollDiv.getTop() - Ext.fly(id).getTop() + scrollToOffset);
        };
    
        return {  // the public methods
            initialize: initialize,
            enable: enable,
            disable: disable,
            faster: faster,
            slower: slower,
            setStep: setStep,
            getScrollDelay: getScrollDelay,
            setScrollDelay: setScrollDelay,
            scrollToId: scrollToId
        };
       
    })();
    
    // initialize the scroller when the page loads
    Ext.onReady(Bitworks.scroller.initialize);

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •