Сделать ExtJS центр элемента макета границы прокручивать горизонтально - PullRequest
Новая
       9

Сделать ExtJS центр элемента макета границы прокручивать горизонтально

3 голосов
/ 21 марта 2012

У меня есть ExtJS Viewport с контейнером, который имеет макет границы, и я хочу, чтобы контейнер в центральной области поддерживал горизонтальную прокрутку.Вот как выглядит код сейчас (это часть приложения Rails, поэтому, пожалуйста, извините код ERB, который отображает часть содержимого): 

    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') %>'
                }
              ]
            }
          ]
        }
      ]
    });

Я ожидаю, что когда окно будетразмер такой, что центральный контейнер имеет ширину менее 800 пикселей, становится прокручиваемым.Вместо этого он просто падает с боковой стороны экрана, не давая мне прокрутиться к нему, хотя он по-прежнему отображается так, как если бы окно имело 800 пикселей, чтобы соответствовать содержимому.Установив autoScroll в значение true, кажется, можно гарантировать, что мы можем прокручивать по вертикали, когда содержимое слишком велико для окна.

Как мне получить желаемое поведение?

Примечание.Решение, упомянутое на , это очень похожий вопрос , но, похоже, оно не работает.

Ответы [ 2 ]

6 голосов
/ 22 марта 2012

Одно из решений заключается в том, чтобы обернуть центральную область в другом контейнере с подходящей компоновкой и установить autoScroll на этом новом контейнере. 

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

Рабочий образец: http://jsfiddle.net/H4vp7/

0 голосов
/ 15 февраля 2019

Я должен был сделать это немного иначе, чем решение Кшиштофа .

В Ext JS v6 + scrollable: true необходимо указать на панели в центральной области. 

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