extjs将垂直滚动条添加到网格

Question

我正在尝试向我的extj添加一个滚动条，似乎无法弄明白。 根据我的研究，人们似乎说它在我的设计中通常是一个糟糕的布局。有人可以指出我正确的方向允许滚动吗？

我有一个包含3个网格的hbox ...中间的一个是详细的DETAILS GRID，在填充数据时没有显示滚动条

      {
        layout: 'hbox',
        flex: 1,
        items: [
            {
                title: 'Account Summary',
                xtype: 'grid',
                id: 'summaryGridID',
                bind: {
                    store: '{myAccountSummaryStore}',
                    selection: '{selectedManager}'
                },
                flex: 1.50,
                forceFit: true,
                //height: 200,
                listeners: {
                    itemClick: 'onSelectionChange'
                },
                columns: [
                    {
                        header: 'AcctNum',
                        dataIndex: 'AcctNum'
                        //maxWidth: 80
                    },
                    {
                        header: 'AcctName',
                        dataIndex: 'AcctShortCode'
                    },
                    {
                        header: 'Daily P&L',
                        dataIndex: 'CalcPLSett',
                        renderer: function (value) {
                            var newVal;
                            var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
                            if (value > 0) {
                                newVal = '<span style="color:green">' + "$" + calc + '</span>';
                            } else if (value < 0) {
                                newVal = '<span style="color:red">' + "$" + calc + '</span>';
                            } else {
                                newVal = "$" + calc;
                            }
                            return newVal;
                        },
                        align: 'right'
                    },
                    {
                        header: 'Daily Pct',
                        dataIndex: 'CalcPLPct',
                        renderer: function (value) {
                            var newVal;
                            var calc = (value * 100).toFixed(2) + "%";
                            if (value === "Infinity") {
                                newVal = "0.00%";
                            } else if (value > 0) {
                                newVal = '<span style="color:green">' + calc + '</span>';
                            } else if (value < 0) {
                                newVal = '<span style="color:red">' + calc + '</span>';
                            } else {
                                newVal = calc;
                            }
                            return newVal;
                        },
                        align: 'right'
                    }
                ]
            },
            {
                xtype: 'splitter'
            },
            {
                xtype: 'grid',
                id: 'detailsGridID',
                bind: {
                    store: '{myDetailsStore}'
                },
                title: 'Details',
                flex: 3,
                forceFit: true,
                //overflowY: 'scroll',
                //autoScroll: true,
                columns: [
                    {
                        header: 'Market',
                        dataIndex: 'FullMarketName',
                        width: 225
                    },
                    {
                        header: 'Last',
                        dataIndex: 'LastPrice',
                        align: 'right'
                    },
                    {
                        header: 'Delta',
                        dataIndex: 'Delta',
                        renderer: function (value) {
                            var newVal;
                            newVal = value.toFixed(3);
                            if (value > 0) {
                                newVal = '<span style="color:green">' + newVal + '</span>';
                            } else if (value < 0) {
                                newVal = '<span style="color:red">' + newVal + '</span>';
                            } else {
                                newVal = newVal;
                            }
                            return newVal;
                        },
                        align: 'right'
                    },
                    {
                        header: 'Prev Pos',
                        dataIndex: 'PrevPos',
                        renderer: function (value) {
                            var newVal;
                            if (value > 0) {
                                newVal = '<span style="color:green">' + value + '</span>';
                            } else if (value < 0) {
                                newVal = '<span style="color:red">' + value + '</span>';
                            } else {
                                newVal = value;
                            }
                            return newVal;
                        },
                        align: 'right'
                    },
                    {
                        header: 'Prev P&L',
                        dataIndex: 'PrevPL',
                        renderer: function (value) {
                            var newVal;
                            var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
                            if (value > 0) {
                                newVal = '<span style="color:green">' + "$" + calc + '</span>';
                            } else if (value < 0) {
                                newVal = '<span style="color:red">' + "$" + calc + '</span>';
                            } else {
                                newVal = "$" + calc;
                            }
                            return newVal;
                        },
                        align: 'right'
                    },
                    {
                        header: 'Top Trd',
                        dataIndex: 'TopTrd',
                        renderer: function (value) {
                            var newVal;
                            if (value > 0) {
                                newVal = '<span style="color:green">' + value + '</span>';
                            } else if (value < 0) {
                                newVal = '<span style="color:red">' + value + '</span>';
                            } else {
                                newVal = value;
                            }
                            return newVal;
                        },
                        align: 'right'
                    },
                    {
                        header: 'Top P&L',
                        dataIndex: 'TopPL',
                        renderer: function (value) {
                            var newVal;
                            var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
                            if (value > 0) {
                                newVal = '<span style="color:green">' + "$" + calc + '</span>';
                            } else if (value < 0) {
                                newVal = '<span style="color:red">' + "$" + calc + '</span>';
                            } else {
                                newVal = "$" + calc;
                            }
                            return newVal;
                        },
                        align: 'right'
                    },
                    {
                        header: 'Net Pos',
                        dataIndex: 'NetPos',
                        renderer: function (value) {
                            var newVal;
                            if (value > 0) {
                                newVal = '<span style="color:green">' + value + '</span>';
                            } else if (value < 0) {
                                newVal = '<span style="color:red">' + value + '</span>';
                            } else {
                                newVal = value;
                            }
                            return newVal;
                        },
                        align: 'right'
                    },
                    {
                        header: 'Net P&L',
                        dataIndex: 'NetPL',
                        renderer: function (value) {
                            var newVal;
                            var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
                            if (value > 0) {
                                newVal = '<span style="color:green">' + "$" + calc + '</span>';
                            } else if (value < 0) {
                                newVal = '<span style="color:red">' + "$" + calc + '</span>';
                            } else {
                                newVal = "$" + calc;
                            }
                            return newVal;
                        },
                        align: 'right'
                    }
                ]
            },
            {
                xtype: 'splitter'
            },
            {
                title: 'Sector Summary',
                xtype: 'grid',
                id: 'sectorGridID',
                bind: {
                    store: '{mySectorSummaryStore}',
                    selection: '{selectedSector}'
                },
                flex: 1.50,
                forceFit: true,
                //height: 200,
                listeners: {
                    itemClick: 'onSectorSelectionChange'
                },
                columns: [
                    {
                        header: 'Sector',
                        dataIndex: 'Sector'
                    },
                    {
                        header: 'Position',
                        dataIndex: 'Position',
                        renderer: function (value) {
                            var newVal;
                            var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
                            if (value > 0) {
                                newVal = '<span style="color:green">' + calc + '</span>';
                            } else if (value < 0) {
                                newVal = '<span style="color:red">' + calc + '</span>';
                            } else {
                                newVal = calc;
                            }
                            return newVal;
                        },
                        align: 'right'
                    },
                    {
                        header: 'P&L',
                        dataIndex: 'CalcPL',
                        renderer: function (value) {
                            var newVal;
                            var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
                            if (value > 0) {
                                newVal = '<span style="color:green">' + "$" + calc + '</span>';
                            } else if (value < 0) {
                                newVal = '<span style="color:red">' + "$" + calc + '</span>';
                            } else {
                                newVal = "$" + calc;
                            }
                            return newVal;
                        },
                        align: 'right'
                    }
                ]
            }
        ]
    },

这是整个小组的布局

Ext.define('ExtApplication1.view.clientdetails.clientdetails',{
extend: 'Ext.panel.Panel',

alias: 'widget.clientdetails',

itemId: 'clientDetailsItemID',

reference: 'clientDetailsPanel',

id: 'clientDetailsViewID',

requires: [
    'ExtApplication1.view.clientdetails.clientdetailsController',
    'ExtApplication1.view.clientdetails.clientdetailsModel'
],

controller: 'clientdetails-clientdetails',

viewModel: {
    type: 'clientdetails-clientdetails'
},

layout: {
    type: 'vbox',
    pack: 'start',
    align: 'stretch'
},
items: [
    {
        layout: 'hbox',
        height: 50,
    items:
},
    {
        layout: 'hbox',
        height: 50,
    items:
},
    {
        layout: 'hbox',
        align: 'stretch',
        flex: 1,
        items: [
THIS IS IS THE AREA WITH THE 3 GRIDS.
THE MIDDLE GRID IS THE ONE THAT I AM TRYING TO HAVE A SCROLLBAR

]