3

境界線レイアウトのコンテナを含むExtJSビューポートがあり、中央領域のコンテナで水平スクロールをサポートしたいと考えています。これは現在のコードのようです（これは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ピクセルであるかのようにレンダリングされますが、スクロールせずに画面の横から落ちるだけです。trueにautoScroll設定すると、コンテンツがウィンドウに対して大きすぎる場合にのみ垂直方向にスクロールできるようになります。

どうすれば目的の動作を得ることができますか？

注：この非常によく似た質問で述べた解決策を試しましたが、機能していないようです。

4

2 に答える 2

6

1 つの解決策は、中央の領域を別のコンテナーに収まるようにラップし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/

于 2012-03-22T08:57:13.620 に答える