extjs scrollbar missing inside vbox

Question

I have grid inside vbox which is inside hbox. The panel 'Packages' is scrollable with mouse wheel but scrollbar is missing. The panel 'Configuration' shows scrollbar and I can't figure out what is the difference between these two panels.

Here is my extjs 4.2 code:

Ext.application({
name: 'Fiddle',
launch: function () {
    Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        defaults: {
            frame: true,
            autoScroll: true
        },
        items: [{
            xtype: 'panel',
            width: 350,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            resizable: true,
            resizeHandles: 'e',
            items: [{
                title: 'Configurations',
                height: 290,
                xtype: 'grid',
                store: new Ext.data.Store({
                    model: 'Ext.data.Record',
                    fields: [{
                        name: 'product',
                        type: 'string'
                    }],
                    data: (function () {
                        var res = []
                        for (var i = 0; i < 100; i++) {
                            res.push({
                                product: 'Product ' + i
                            });
                        }
                        return res;
                    })()
                }),
                columns: [{
                    text: 'Product',
                    dataIndex: 'product',
                    width: 120
                }]
            }, {
                xtype: 'splitter'
            }, {
                title: 'Builds',
                xtype: 'grid',
                flex: 1,
                viewConfig: {
                    enableTextSelection: true
                },
                columns: [{
                    text: 'Number',
                    dataIndex: 'number',
                    width: 120
                }]
            }]
        }, {
            xtype: 'panel',
            width: '100%',
            layout: {
                type: 'vbox'
            },
            items: [{
                title: 'Packages',
                width: '100%',
                xtype: 'grid',
                flex: 2,
                store: new Ext.data.Store({
                    model: 'Ext.data.Record',
                    fields: [{
                        name: 'name',
                        type: 'string'
                    }],
                    data: (function () {
                        var res = []
                        for (var i = 0; i < 100; i++) {
                            res.push({
                                name: 'Package ' + i
                            });
                        }
                        return res;
                    })()
                }),
                columns: [{
                    text: 'Name',
                    dataIndex: 'name',
                    width: 380
                }]
            }, {
                xtype: 'splitter'
            }, {
                title: 'Changes',
                width: '100%',
                xtype: 'grid',
                flex: 1,
                columns: [{
                    text: 'Author',
                    dataIndex: 'author',
                    width: 159
                }]
            }]
        }]
    });
}
});

Answer 1

For the second hbox child panel replace width: '100%', with flex: 1,. The scrollbar was there, it just was outside the visible area. Also, you can omit width: '100%', for "Changes" and "Packages" grids if you specify align: 'stretch' in the vbox layout configuration of their parent panel, which means that the child items will be stretched horizontally to fill the width of the parent container.

https://fiddle.sencha.com/#view/editor&fiddle/1nht