scrollbar appears at the bottom Grid

[vasu-vvp]

I have scrollPan on which i have added Grid.
This scroll pan is added as 'center' component of root panel.
root.setBorderLayout() method is used to set layout. and then root.add('center', scrollPan) is called to add this scrollPan on root.
Refer image

To solve this I have tried following code :-

this.root.setLayout(new layout.BorderLayout([
                    function doLayout(target) {
                        this.$super(target);
                        for(var x = 0; x < target.kids.length; x++){
                            var kid = target.kids[x];
                            if(kid.constraints === 'center'){
                                var ps =  kid.getPreferredSize();
                                var targetWidth = target.width;
                                var targetHeight = target.height;
                                kid.setSize( ps.width > targetWidth ? targetWidth : ps.width,
                                    ps.height > targetHeight ? targetHeight : ps.height);
                                target.vrp();
                                //Calling break since intentionally since we will have only single grid
                                break;
                            }
                        }
                    }
                ]));

After this scrollbars appears as expected but when both scrollbars appears.
Refer image

which layout needs to be used for this. I tried various things for this.
Can you suggest how to resolve this issue ?

[vasu-vvp]

it seems that while calculating preferred size of scrollpan component thumb size is not considered.
This is resulting in a bug which is causing to appear the both the scrollbars on canvas even if there is enough space available.