undefined owner when resize grid with paging grid scrolller

[rspaeth]

when using a paging grid scroller for a grid, the scroller loses its owner ct when page resize happens on a smaller data set. The Ext.panel.Table removes the scroller from the dock when the page is resized large enough for the scroller to hide. When the user resizes the page back to a smaller page (expecting the scroller) an owner is undefined error occurs (because when the scroller was removed from the dock of the table, the ownerCt because undefined).

ext version:
4.0.0

browser: firefox (did not test others)

how to reproduce:
-using the code below
-resize the page to show/hide the scroller
-resize the page again to hide/show the scroller

current outcome:
owner is undefined error

expected outcome:
the scrollbar will hide/show as expected

example: (note this is the buffer-grid example with a smaller data set)

Ext.onReady(function(){
    /**
     * Returns an array of fake data
     * @param {Number} count The number of fake rows to create data for
     * @return {Array} The fake record data, suitable for usage with an ArrayReader
     */
    function createFakeData(count) {
        var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
            lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
            ratings      = [1, 2, 3, 4, 5],
            salaries     = [100, 400, 900, 1500, 1000000];

        var data = [];
        for (var i = 0; i < (count || 25); i++) {
            var ratingId    = Math.floor(Math.random() * ratings.length),
                salaryId    = Math.floor(Math.random() * salaries.length),
                firstNameId = Math.floor(Math.random() * firstNames.length),
                lastNameId  = Math.floor(Math.random() * lastNames.length),

                rating      = ratings[ratingId],
                salary      = salaries[salaryId],
                name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);

            data.push({
                rating: rating,
                salary: salary,
                name: name
            });
        }
        return data;
    }

    Ext.define('Employee', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'rating', type: 'int'},
           {name: 'salary', type: 'float'},
           {name: 'name'}
        ]
    });


    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        id: 'store',
        pageSize: 100,
        // allow the grid to interact with the paging scroller by buffering
        buffered: true,
        // never purge any data, we prefetch all up front
        purgePageCount: 0,
        model: 'Employee',
        proxy: {
            type: 'memory'
        }
    });



    var grid = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        region: 'center',
        title: 'Bufffered Grid of 5,000 random records',
        store: store,
        verticalScroller: {
            xtype: 'paginggridscroller',
            activePrefetch: false
        },
        loadMask: true,
        disableSelection: false, //true,
        invalidateScrollerOnRefresh: false,
        viewConfig: {
            trackOver: false
        },
        columns:[{
            xtype: 'rownumberer',
            width: 40,
            sortable: false
        },{
            text: 'Name',
            flex:1 ,
            sortable: true,
            dataIndex: 'name'
        },{
            text: 'Rating',
            width: 125,
            sortable: true,
            dataIndex: 'rating'
        },{
            text: 'Salary',
            width: 125,
            sortable: true,
            dataIndex: 'salary',
            align: 'right',
            renderer: Ext.util.Format.usMoney
        }]
    });
	
	new Ext.Viewport(
   	{
	    layout: 'border'
	    ,items: [
	       {
	    	   xtype: 'panel',
	    	   layout: 'fit',
	    	   region: 'north',
	    	   height: 100
	       },
	       {
	    	   xtype: 'panel',
	    	   layout: 'fit',
	    	   region: 'west',
	    	   width: 100
	       },
	       grid
		]
	});

    var data = createFakeData(17),
        ln = data.length,
        records = [],
        i = 0;
    
    for (; i < ln; i++) {
        records.push(Ext.ModelManager.create(data[i], 'Employee'));
    }
    store.cacheRecords(records);

    store.guaranteeRange(0, 49); 
});

my override fixes that seem to work:

Ext.override( Ext.panel.Table,
{
	/**
     * Request a recalculation of scrollbars and put them in if they are needed.
     */
    determineScrollbars: function() {
        var me = this,
            viewElDom,
            centerScrollWidth,
            centerClientWidth,
            scrollHeight,
            clientHeight;

        if (!me.collapsed && me.view && me.view.el && me.view.el.dom) {
            viewElDom = me.view.el.dom;
            //centerScrollWidth = viewElDom.scrollWidth;
            centerScrollWidth = me.headerCt.getFullWidth();
            /**
             * clientWidth often returns 0 in IE resulting in an
             * infinity result, here we use offsetWidth bc there are
             * no possible scrollbars and we don't care about margins
             */
            centerClientWidth = viewElDom.offsetWidth;
            if (me.verticalScroller && me.verticalScroller.el) {
                //if the scroller was removed because of hide, we need to assign it back here
            	if( !me.verticalScroller.ownerCt )
            	{
            		me.verticalScroller.ownerCt = this;
            	}
                scrollHeight = me.verticalScroller.getSizeCalculation().height;
            } else {
                scrollHeight = viewElDom.scrollHeight;
            }

            clientHeight = viewElDom.clientHeight;
            
            if (!me.collapsed && scrollHeight > clientHeight) {
                me.showVerticalScroller();
            } else {
                me.hideVerticalScroller();
            }

            if (!me.collapsed && centerScrollWidth > (centerClientWidth + Ext.getScrollBarWidth() - 2)) {
                me.showHorizontalScroller();
            } else {
                me.hideHorizontalScroller();
            }
        }
    },
    
    
    /**
     * Show the horizontalScroller and add the horizontalScrollerPresentCls.
     */
    showHorizontalScroller: function() {
        var me = this;

        if (me.verticalScroller) {
            me.verticalScroller.offsets.bottom = Ext.getScrollBarWidth() - 2;
        }
        
        //check if it is docked or not because the item may have been removed on hide
        if (me.horizontalScroller && !me.getDockedComponent( me.horizontalScroller ) ) 
        {
        	me.addDocked(me.horizontalScroller);
            me.addCls(me.horizontalScrollerPresentCls);
            me.fireEvent('scrollershow', me.horizontalScroller, 'horizontal');
        }
    },


    /**
     * Show the verticalScroller and add the verticalScrollerPresentCls.
     */
    showVerticalScroller: function() {
        var me = this,
            headerCt = me.headerCt;

        // only trigger a layout when reserveOffset is changing
        if (headerCt && !headerCt.layout.reserveOffset) {
            headerCt.layout.reserveOffset = true;
            headerCt.doLayout();
        }
        
        //check if it is docked or not because the item may have been removed on hide
        if ( me.verticalScroller && !me.getDockedComponent( me.verticalScroller ) ) 
        {
            me.addDocked( me.verticalScroller );
            me.addCls(me.verticalScrollerPresentCls);
            me.fireEvent('scrollershow', me.verticalScroller, 'vertical');
        }
    }
} );