ExtJS 6 - Scrollable GridPanels - extjs

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();
}
});