I am encountering an issue with an html page where I am trying to render a panel with layout set to 'border'. The panel is rendered to a div using the renderBody config. However, when I run the page, I am receiving an error message stating 'layout run fails'.
Below is the ExtJs code I am using:
Ext.create('Ext.panel.Panel', {
//width: 500, // I want to fit this panel to parent element
//that i render this panel to it
//height: 300, //
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region',
region: 'south',
xtype: 'panel',
height: 100
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
width: 200,
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
layout: 'fit'
}],
renderTo: 'div-Id'
});
I am seeking advice on how to resolve this issue. Any suggestions would be greatly appreciated.