I'm currently working on an ExtJS Viewport that includes a container with a border layout. My goal is to have the container in the center region support horizontal scrolling. The code snippet below shows how it's set up (this is within a Rails application, so please bear with the ERB code used for content rendering):
var viewport = Ext.create('Ext.container.Viewport', {
defaultType: 'container',
layout: 'border',
items: [
{
defaultType: 'container',
minWidth: 800,
region: 'north',
items: [
<%= render "shared/header" %>
,<%= render "shared/title_bar" %>
]
},{
defaultType: 'container',
minWidth: 800,
region: 'center',
autoScroll: true,
items: [
<%= ext_site_flash_panel(:alert, flash[:site_alert]) %>,
<%= ext_site_flash_panel(:notice, flash[:site_notice]) %>,
<%= ext_flash_panel(:alert, flash[:alert]) %>,
<%= ext_flash_panel(:notice, flash[:notice]) %>,
{
defaultType: 'container',
margin: '20 20 20 20',
defaults: {
margin: '0 0 15 0'
},
items: [
<% if content_for?(:top_section) %>
<%= yield :top_section %>,
<% end %>
<%= content_for?(:main_content) ? yield(:main_content) : yield %>
]
},{
id: 'footer',
defaultType: 'container',
padding: '10 0 10 0',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [
{
html: '<%= escape_javascript(render 'shared/copyright') %>'
}
]
}
]
}
]
});
The expected behavior is for the center container to become horizontally scrollable when the window width is less than 800px. However, the current implementation causes the content to overflow without enabling horizontal scrolling, although it appears as if there is enough space. Setting autoScroll to true only allows vertical scrolling when necessary.
How can I achieve the desired functionality?
Attempted the solution mentioned in a very similar question found at this link, but it didn't seem to work in my case.