extjs6 layout run failed.. border layout, center region, hbox inside vbox - extjs

Question

In my extjs6 version 6.0.0.640 project, I am getting layout run failed when I populate my grid and chart.
My panel's layout is set to border. In the center region I have a fit layout. Then trying to have 3 rows, but in one of the rows I want to put in a hbox. So far my layout is like this. If I remove the hbox it works, but I want to put multiple items in one of my rows.
Ext.define('ExtApplication4.view.historical.Historical', {
extend: 'Ext.panel.Panel',
xtype: 'app-historical',
controller: 'historical',
itemId: 'historicalItemId',
requires: [
'ExtApplication4.view.historical.HistoricalController',
'ExtApplication4.util.GlobalVar',
'Ext.chart.*'
],
title: 'Historical',
layout: {
type: 'border'
},
defaults: {
split: true,
bodyPadding: 15
},
items: [
{
title: 'Accounts',
region: 'west',
margin: '5 0 0 0',
width: 100,
//html: 'this is the menu account area',
dockedItems: [
{
xtype: 'toolbar',
dock: 'left',
//cls: 'myBgCls',
style: 'padding: 0; margin: 0;'
//items: [
// {
// xtype: 'combobox',
// itemId: 'comboboxClientItemID',
// emptyText: 'Select Client...',
// editable: false,
// displayField: 'clientName',
// valueField: 'clientName',
// bind: {
// store: '{myClientListStore}',
// selection: '{selectedClientListModel}'
// },
// listeners: {
// select: 'onComboboxSelect'
// },
// queryMode: "local"
// }
//]
}
]
},
{
title: 'Main Content',
region: 'center',
layout: {
type: 'fit'
},
items: [
{
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'button'
},
{
flex: 1,
title: 'Sector',
xtype: 'grid',
ui: 'featuredpanel-framed',
itemId: 'attributionSectorGridID',
cls: 'custom-grid',
margin: '0px 0px 0px 0px',
bind: {
store: '{myAttributionGroupedStore}'
},
columns: [
{
header: 'Sector',
dataIndex: 'Sector',
flex: 1
},
{
header: 'P&L',
dataIndex: 'DailyPL',
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',
flex: 1
}
]
},
{
xtype: 'panel',
flex: 3,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
title: 'Winners',
xtype: 'grid',
ui: 'featuredpanel-framed',
itemId: 'attributionWinnersGridID',
cls: 'custom-grid',
margin: '5px 0px 0px 0px',
bind: {
store: '{myAttributionWinnersStore}'
},
columns: [
{
header: 'Sector',
dataIndex: 'Sector',
flex: 1
},
{
header: 'Market',
dataIndex: 'ShortDesc',
flex: 1
},
{
header: 'P&L',
dataIndex: 'DailyPl',
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',
flex: 1
}
]
}
]
}
]
}
]
}
]
});

Answer 1

If "Layout Run Failed" after adding a hbox layout, check all items of the container you added the hbox layout on. The items in an hbox layout require a width, either as fixed width, as percentage or using flex (the latter only works if the width of the container can be derived from somewhere).
In your case, the grid seems not to have a width. Usually, the grid width would be calculated by adding up all the column widths (the default width of a column being 100), but since at least one column has a flex set, this does not work in your case.
Similarly, if it failed after adding a vbox layout, one of the items of the container with said layout does not have a height.