I am facing an issue with a side panel in Ext.js. Everything is working fine until I resize the browser, at which point some components of the panel get cut off.
https://i.sstatic.net/eaEGI.png
Is there a way to make the panel resize automatically when the browser is resized?
{
xtype: 'panel',
border: 1,
margin: 5,
flex: 1,
autoScroll: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'panel',
title: localization.moduleS.labelOutlineAttributesField,
border: 0,
bodyPadding: '12 5 12 5',
className: 'outlineAttrField',
hidden: true,
items: [
]
},
{
xtype: 'sattrfillinpanel',
title: localization.moduleS.labelFillInAttributesField,
border: 0,
bodyPadding: '2 5 12 5',
hidden: true
},
{
xtype: 'panel',
title: localization.moduleS.labelGeoAttributesField,
border: 0,
bodyPadding: '5',
className: 'outlineField',
hidden: true,
items: [
{
xtype: 'sdrawbuttonpanel',
className: 'drawButtonPanel',
margin: '0 0 0 0',
},
{
xtype: 'container',
title: localization.moduleS.labelFiltersPanel,
border: 0,
margin: '0, 5, 0, 2',
className: 'filtersField',
hidden: true,
items: [
{
xtype: 'sfeaturefilterpanel',
className: 'baseMapOutlineField',
label: localization.moduleS.labelShowAttributesOnLeftField
},
{
xtype: 'sfeaturefilterpanel',
margin: '0 0 0 0',
className: 'dualMapOutlineField',
label: localization.moduleS.labelShowAttributesOnRightField
}
]
},
]
},
The filters field is experiencing the cutting off issue.