Question

I have an ExtJS Viewport with a container that has the border layout and I want to have the container in the center region support horizontal scrolling. This is what the code looks like now (this is part of a Rails application, so please excuse the ERB code that renders some of the content):

    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 behavior I expect is that when the window is sized such that the center container has less than 800 px of width, it will become scrollable. Instead it just falls off the side of the screen without allowing me to scroll over to it, although it does still render as if the window had 800 px to fit the content. Having autoScroll set to true only seems to ensure that we can scroll vertically when the content is too big for the window.

How can I get the desired behavior?

Note: Tried the solution mentioned at this very similar question but it doesn’t seem to work.

Answer 1

One solution is to wrap center region in another container with fit layout, and set autoScroll on this new container.

{
    defaultType: 'container',
    layout: 'fit',
    region: 'center',
    autoScroll: true, // WARNING: deprecated since v5.1.0 (use scrollable)
    scrollable: true, // v5.1.0+
    items: [ /* your current center panel goes here */ ]
}

Working sample: http://jsfiddle.net/H4vp7/