Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    34
    Vote Rating
    0
    gordonk66 is on a distinguished road

      0  

    Default [4.0.7] No vertical scrollbar in Grid. viewready event being called prematurely

    [4.0.7] No vertical scrollbar in Grid. viewready event being called prematurely


    I'm seeing an issue on one grid in my application across all browsers. The base problem is the vertical scrollbar is not enabled for the grid. I traced the reason for no scrollbar down to two issues both in Ext.panel.Table.

    1. The gird view ready event is being called prior to the table child of the view.el being created. This is a problem b/c the determineScrollbars function relies on it being there in order to determine if there should be a vert scrollbar. So to lay it out the onViewReady function calls the determineScrollbars function where does the following to determine the height of the vertical scroller:

    Code:
                // Calculate the height of the scrolling block
               // gordonk66 - my verticalScroller.el is undefined.  I verified this is true on other functioning grids on initial load as well
                if (verticalScroller && verticalScroller.el) {
                    scrollHeight = verticalScroller.getSizeCalculation().height;
                } else {
                    // gordonk66 - child function returns undefined
                    tableEl = view.el.child('table', true);
                    scrollHeight = tableEl ? tableEl.offsetHeight : 0;
                }
    My workaround for this (which I hate) is to override the onViewReady function in the grid having the problem and add a defer for waiting until the view child call to table is not undefined:

    Code:
        onViewReady: function() {
            if (this.deferRowRender) {
                // here we need to wait until the view el is rendered and then set the height equal to the body height
                var view = this.getView();
                // If the view dom exists we are ready to process.
                if (view.el.child('table', true) !== undefined) {
                    this.fireEvent('viewready', me);
                    this.determineScrollbars();
                    this.invalidateScroller();
                } else {
                    // If the view body does not exist queue this function to execute again in .1 seconds.
                    Ext.defer(this.onViewReady, 100, this);
                }
            } else {
                // If deferRowRender is false just fire the viewready event.
                this.fireEvent('viewready', me);
            }
        }
    Ok so this got me into problem number two which is the clientHeight being used in determineScrollbars which is pulled from view.el.getSize() is not equal to the size of the panel height. Instead it is equal to the tableEl.offsetHeight found above which also results in no vertical scrollbar. I got around this by altering onViewReady further to change the height of the view.el to match the body of the grid panel.

    Final work around:
    Code:
        onViewReady: function() {
            if (this.deferRowRender) {
                // here we need to wait until the view el is rendered and then set the height equal to the body height
                var height = this.body.getHeight();
                var view = this.getView();
                // If the view dom exists we are ready to process.
                if (view.el.child('table', true) !== undefined) {
                    // Alter the height of the view to match that of the panel body.
                    view.el.setHeight(height);
                    this.fireEvent('viewready', me);
                    this.determineScrollbars();
                    this.invalidateScroller();
                } else {
                    // If the view body does not exist queue this function to execute again in .1 seconds.
                    Ext.defer(this.onViewReady, 100, this);
                }
            } else {
                // If deferRowRender is false just fire the viewready event.
                this.fireEvent('viewready', me);
            }
        }
    Other details:
    This only happens when a horizontal scrollbar is not present. If the columns of the grid are shorter then the width of the grid panel this issue appears.
    I didn't open a bug report on this b/c I have no clear testcase for reproducing it. I only see it on a single grid in my app. The grid is hidden when the app initially loads and has quite a bit of complexity around it (renderers, paging toolbar, etc).

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The scrolling should be fixed in 4.1 as the native scrolling is back.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    34
    Vote Rating
    0
    gordonk66 is on a distinguished road

      0  

    Default


    Thanks Mitch.
    I suppose there's no word on when 4.1 will be available?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by gordonk66 View Post
    Thanks Mitch.
    I suppose there's no word on when 4.1 will be available?
    Preview has been out...

    http://www.sencha.com/blog/ext-js-4-...loper-preview/
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread