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 bee 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.

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 bee 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.

• javascript
• extjs
• extjs4
• horizontal-scrolling
• border-layout

Share Improve this question Follow edited May 23, 2017 at 11:48 CommunityBot 111 silver badge asked Mar 21, 2012 at 15:05 Gordon Seidoh WorleyGordon Seidoh Worley 8,08877 gold badges5050 silver badges8888 bronze badges 1

• Have you tried setting a width property on the center panel? – dbrin Commented Mar 21, 2012 at 18:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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/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 */ ]
        }]
    }]
}