Extjs 4.1 - grid with drag & drop, vertical scroll doesn't work

I have 2 grids on a window which support drag and drop each by himself and also between each other. I can't get the vertical scroll to work when dragging above the first row in the grid or below the last row in the grid. currently, i must first scroll all the way down if i want to drag the record to the bottom of the grid. using containerScroll didn't solve the problem.

Ext.define('MyApp.view.DDFieldsGrid', {
            extend: 'Ext.grid.Panel',
            xtype: 'ddfieldsgrid',
            hideHeaders: true,
            multiSelect: true,
            autoScroll: true,
            markDirty: false,
            columns: [
                { dataIndex: 'item', flex: 1 }
            ],
            viewConfig: {
                plugins: {
                    containerScroll: true,
                    ptype: 'gridviewdragdrop',
                    ddGroup: 'firstGridDDGroup'
                }
            }
        });


 this.mainWin = Ext.create('Ext.window.Window', {
            layout: 'centered',
            title: 'Blotter Fields',
            resizable: false,
            closeAction: 'hide',
            hidden: true,
            shadow: true,
            tbar: [{
                xtype: 'combo',
                fieldLabel: 'Fields Type',
                id: 'comboCategories',
                editable: false,
                queryMode: 'local',
                selectOnFocus: true,
                forceSelection: true,
                iconCls: 'no-icon',
                triggerAction: 'all',
                store: categoreyItems,
                listeners: {
                    select: function (ele, newValue, oldValue) {
                        var category = this.valueModels[0].index;
                        var store = Ext.getStore('availableFields');
                        store.filterBy(function (record) {
                            return category == 0 /*All*/ || record.get('category') === category;
                        }, this);

                    }
                }
            }, ' ', {
                xtype: 'checkbox',
                fieldLabel: 'Show Details field',
                margin: '0 10 0 20',
                //hidden: this.customizationModel._customizationView.detailsCustomOptions.showDetailsFieldsOption == false,
                checked: this.customizationModel._customizationView.detailsCustomOptions.showDetailsFieldsOption,
                listeners: {
                    click: {
                        fn: this.onShowDetailsField,
                        scope: this
                    }
                }
            }, ' ', {
                xtype: 'checkbox',
                fieldLabel: 'Show custom fields',
                margin: '0 10 0 20',
                //hidden: this.customizationModel._customizationView.detailsCustomOptions.showUserCustomFieldsOptions == false,
                checked: this.customizationModel._customizationView.detailsCustomOptions.showUserCustomFieldsOptions,
                listeners: {
                    click: {
                        fn: this.onShowCustomFields,
                        scope: this
                    }
                }
            }],
            dockedItems: [
            {
                xtype: 'toolbar',
                flex: 1,
                dock: 'bottom',
                layout: {
                    pack: 'end',
                    type: 'hbox'
                },
                items: [
                    {
                        xtype: 'button',
                        text: 'Cancel',
                        listeners: {
                            click: {
                                fn: this.onCancelSettings,
                                scope: this
                            }
                        }
                    },
                    {
                        xtype: 'button',
                        text: 'OK',
                        listeners: {
                            click: {
                                fn: this.onAcceptSettings,
                                scope: this
                            }
                        }
                    }
                ]
            }
            ],
            items: [{
                store: availableFieldsStore,
                title: 'Available Fields'
            }, {
                store: selectedFieldsStore,
                title: 'Selected Fields'
            }],
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            defaults: {
                xtype: 'ddfieldsgrid',
                height: 200,
                margin: 8,
                width: 300
            }
        });