ExtJS 6 - Scrollable GridPanels

Question

I'm working on a Sencha ExtJS 6.5 project. I have two gridpanels, one next to each other, and I need them to be scrollable, but no matter what I try, I can't seem to accomplish that.

I must add that this two gridpanels are inside another panel, which is also within a ViewPort.

This is a picture of what I need:

And this the code I have written so far:

Ext.define('ScrollTest.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.myviewport',

    requires: [
        'ScrollTest.view.MyViewportViewModel',
        'Ext.toolbar.Toolbar',
        'Ext.button.Button',
        'Ext.grid.Panel',
        'Ext.grid.column.Column',
        'Ext.view.Table'
    ],

    viewModel: {
        type: 'myviewport'
    },
    layout: 'fit',

    items: [
        {
            xtype: 'panel',
            alignOnScroll: false,
            border: false,
            itemId: 'oMainPanel',
            title: 'Familias de Activos',
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    itemId: 'oGridToolbar',
                    items: [
                        {
                            xtype: 'button',
                            text: 'Agregar Familia'
                        },
                        {
                            xtype: 'button',
                            text: 'Modificar Familia'
                        },
                        {
                            xtype: 'button',
                            text: 'Eliminar Familia'
                        },
                        {
                            xtype: 'button',
                            text: 'Detalle'
                        }
                    ]
                }
            ],
            items: [
                {
                    xtype: 'panel',
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [
                        {
                            xtype: 'gridpanel',
                            flex: 1,
                            alignOnScroll: false,
                            scrollable: true,
                            title: 'Familias',
                            headerBorders: false,
                            bind: {
                                store: '{oStore}'
                            },
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'id',
                                    text: 'blah blah'
                                }
                            ],
                            viewConfig: {
                                scrollable: 'vertical'
                            }
                        },
                        {
                            xtype: 'gridpanel',
                            flex: 1,
                            alignOnScroll: false,
                            scrollable: 'vertical',
                            title: 'Articulos',
                            bind: {
                                store: '{oStore2}'
                            },
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'id',
                                    text: 'blop blop'
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]

});

What am I doing wrong? Thank you very much in advance.

Answer 1

You have an unnecessary layer of nesting, there is a panel with no layout defined. Remove it:

Ext.define('ScrollTest.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.myviewport',

    layout: 'fit',

    items: [{
        xtype: 'panel',
        border: false,
        itemId: 'oMainPanel',
        title: 'Familias de Activos',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            itemId: 'oGridToolbar',
            items: [{
                xtype: 'button',
                text: 'Agregar Familia'
            }, {
                xtype: 'button',
                text: 'Modificar Familia'
            }, {
                xtype: 'button',
                text: 'Eliminar Familia'
            }, {
                xtype: 'button',
                text: 'Detalle'
            }]
        }],
        items: [{
            xtype: 'gridpanel',
            flex: 1,
            title: 'Familias',
            store: {
                data: (function() {
                    var data = [],
                        i;
                    for (i = 1; i <= 100; ++i) {
                        data.push({id: i});
                    }
                    return data;
                })()
            },
            columns: [{
                dataIndex: 'id',
                text: 'blah blah'
            }]
        }, {
            xtype: 'gridpanel',
            flex: 1,
            title: 'Articulos',
            store: {
                data: (function() {
                    var data = [],
                        i;
                    for (i = 1; i <= 100; ++i) {
                        data.push({id: i});
                    }
                    return data;
                })()
            },
            columns: [{
                dataIndex: 'id',
                text: 'blop blop'
            }]
        }]
    }]

});

Ext.application({
    name: 'Fiddle',

    launch: function () {
        new ScrollTest.view.MyViewport();
    }
});