Make ExtJS center item of border layout scroll horizontally

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.

Answers


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/


I had to do it slightly differently from Krzysztof's solution.

In Ext JS v6+ scrollable: true needed to be specified on the panel within the center region.

{
    xtype: 'panel',
    layout: 'border',
    items: [{
        xtype: 'toolbar',
        region: 'north',
        items: ['->', {
            xtype: 'button',
            text: 'Update'
        }]
    }, {
        defaultType: 'container',
        layout: 'fit',
        region: 'center',
        items: [{
            xtype: 'panel',
            scrollable: true, // scrollable center panel
            items: [ /* center panel content */ ]
        }]
    }]
}

Need Your Help

Animated website scaling/zooming

javascript css html5 animation page-zoom

Please have a look at www.mediawiki.org using Chrome and try increasing/decreasing the page zoom (Ctrl + +/-).

Is ColdFusion on Linux/Apache stable?

apache coldfusion railo cfml

I'm working on a site that still has a lot of scripts in ColdFusion. I need to move it to a new server. I much prefer Apache/Linux instead of IIS/Windows. I've seen some info here and there about r...