Results 1 to 5 of 5

Thread: Ext.util.Scroller. How to make it recalculate scrollbar size?

  1. #1
    Sencha User Animal's Avatar
    Join Date
    Mar 2007

    Default Ext.util.Scroller. How to make it recalculate scrollbar size?

    Is there a way of forcing a Scroller's Scrollbars to update their size when the content which they are scrolling is resized?

    I the screenshot below, the PDF content of the Panel has been expanded using reverse pinch so that there is now much more scroll available. The Scroller allows the scroll, but you see the way the scrollbars cross? There should be a way to force a recalc of their size.

    They do resize "dyamically" when you hit a scroll limit.

    (Hmmm..... of course I forgot that there are more pixels per inch on the iPhone, I didn't realize that the screenshot would be so huge!)

  2. #2
    Ext User
    Join Date
    Aug 2010
    Sweden, Vsters


    I had the same problem with my zoom functionality.
    The problem lays in that updateBounds uses the naturalHeight and naturalWidth to calculate content size. Also, the same function uses the container size, where the zoomed object is located. I did manually resize that container to the same height and width as the zoomed object during the pinch.

    This is the updated updateBounds() im using ... not so pretty, but it does the trick ...

     * Function for getting calculated height of an object
    Element.prototype.calculatedHeight = function () {
        return document.defaultView.getComputedStyle(this, null).getPropertyValue('height', null).replace("px", "");
     * Function for getting calculated width of an object
    Element.prototype.calculatedWidth = function () {
        return document.defaultView.getComputedStyle(this, null).getPropertyValue('width', null).replace("px", "");
     * Override current implementation of the updateBounds() method.
     * We are getting errors when zooming the image, it gets placed outside the scrollable area.
    Ext.override(Ext.util.Scroller, {
        updateBounds: function (scrollIntoView) {
            var me = this,
                needsScroll = false,
                firstChild = me.scroller.dom.firstChild,
            // Get container size
            me.parentSize = {
                width: me.parent.getWidth(true),
                height: me.parent.getHeight(true)
            // Get content size. Either the new calculated/scaled size or the initial scoller size
            me.contentSize = {
                width: firstChild ? firstChild.calculatedWidth() : me.scroller.dom.scrollWidth,
                height: firstChild ? firstChild.calculatedHeight() : me.scroller.dom.scrollHeight
            // Get the scrollable view size
            me.size = {
                width: Math.max(me.contentSize.width, me.parentSize.width),
                height: Math.max(me.contentSize.height, me.parentSize.height)
            // Determine the boundaries that we can drag between
            me.bounds = {
                x: me.parentSize.width - me.size.width,
                y: me.parentSize.height - me.size.height
            * Below, we check if we're scrolled past the dimensions of the container.
            * If the content size changes, say, all the items being removed from a list
            * we need to truncate the scroller.
            if (scrollIntoView) {
                if (this.scrollTo(me.getOffset()) !== false) {
            if (me.scrollbarX) {
                calcX = me.size.width - me.parentSize.width;
                if (scrollX > calcX) {
                    needsScroll = true;
                    scrollX = calcX;
            if (me.scrollbarY) {
                calcY = me.size.height - me.parentSize.height;
                if (scrollY > calcY) {
                    needsScroll = true;
                    scrollY = calcY;
            if (needsScroll) {
                    x: scrollX,
                    y: scrollY
                }, false);

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007


    Cheers Kask. I'll look into that when I get back to my other office (home!)

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Sydney, Australia


    Yeah updateBounds is the method you want to be looking at, iirc it's changed a bit from the one @Kask posted.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5

    Question BufferView - How to make it recalculate scroller height on browser window resize?

    BufferView - getVisibleRowCount()
    protected int getVisibleRowCount() {
    int rh = getCalculatedRowHeight();
    int visibleHeight = scroller.getHeight();
    return (int) ((visibleHeight < 1) ? 0 : Math.ceil(((double) visibleHeight / rh)));

    scroller.getHeight() does not change when the browser window is resized.

Similar Threads

  1. Make the scroller visible.
    By blessan in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 2 Sep 2010, 7:03 PM
  2. How to make a toolbar button stretch to its icon size?
    By fzammetti in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 13 Jul 2010, 12:22 PM
  3. Help using Ext.util.Scroller...
    By watrboy00 in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 13 Jun 2010, 12:54 AM
  4. Make first tab panel to a specfic size/width
    By qtax87 in forum Ext 2.x: Help & Discussion
    Replies: 13
    Last Post: 6 Nov 2008, 1:19 AM
  5. [Solved] Can I make BorderLayout 100% window size?
    By timefortea in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 7 Jul 2008, 7:14 AM

Posting Permissions

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