Extjsスクロールバーを表示する方法は？

Question

フォームの幅が広く、コンテナを含むとすぐにスクロールバーを表示する必要があります。コンテナにautoScroll：trueというプロパティを設定しましたが、動作しません。必要な結果を得るためにとにかくありますか？ここで

は、レイアウトを追加した後、コード

Ext.create('Ext.container.Viewport', { 

    layout: { 
     header: false, 
     type: 'border', 
     padding: 0 
    }, 
    items: [{ 
      region: 'north', 
      padding: '0 150 0 150', 
      height: 36, 
      html: 'header' 
     }, { 
      id:'mainPanelContainer', 
      autoScroll: true, 
      padding: '0 150 0 150', 
      region: 'center', 
      items:[ 
       { 
        xtype:'form', 
        items:[{ 
         xtype: 'container', 
         flex: 1, 
         layout: 'anchor', 
         items: [{ 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          anchor: '95%', 
          xtype: 'htmleditor', 
          fieldLabel: 'Popis', 
          name: 'Description', 
          height: 240, 
          width: 450 
         }] 
        }, { 
         xtype: 'container', 
         flex: 1, 
         layout: 'anchor', 
         items: [{ 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'container', 
          margin: '0 0 8 0', 
          layout: 'hbox', 
          items: [{ 
           xtype: 'textfield', 
           fieldLabel: 'Name', 
           name: 'Name' 
          }, { 
           xtype: 'textfield', 
           fieldLabel: 'Name', 
           name: 'Name' 
          }] 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }] 
        }] 
       } 
      ] 
     }, { 
      region: 'south', 
      height: 25, 
      padding: '0 150 0 150', 
      html: 'Copyright © 2013' 
     }] 
}); 

EDIT

実施例

http://jsfiddle.net/mQC3B/2/

です：スクロールバーが表示されますmainPanelContainerに 'フィット' が、それはありませんフォームの隠れた右側にスクロールすることができます。

http://jsfiddle.net/mQC3B/3/

Answer 1

、変更：中央領域における

padding: '0 150 0 150', 

へ：

margin: '0 150 0 150', 

信じられないかもしれませんが、ExtJSのレイアウトは非常によくパディングプロパティを処理しません。これまで私のレイアウトで走ってきました。あなたの例のように見えますが、マージンはあなたが望むものを達成するために働きます。同じ結果を達成する別の方法は、ボーダーレイアウトで別のレベルを深くネストし、パディングの動作を模倣するために空のスペースを持つ東と西の領域を追加することです。

Answer 2

autoScroll: trueそれを行う方法ですが、それが機能するために、あなたのレイアウトのすべてが正しいている必要があります。 mainPanelContainerおよび/またはformにlayout: 'fit'を入れてみてください。あなたの編集のためのあなたのフィドルで

Answer 3

入れ子になっているフォームを削除し、パージをオーバーラニングするコンテナ（この例ではビューポート）に置くだけで、わかっていることから後のものを得ることができます。

http://jsfiddle.net/mQC3B/15/

Ext.create('Ext.container.Viewport', { 

    padding: '0 150 0 150', 

    layout: { 
     header: false, 
     type: 'border' 
    }, 
    items: [{ 
     region: 'north', 
     height: 36, 
     html: 'header' 
    }, { 
     id: 'mainPanelContainer', 
     autoScroll: true, 
     region: 'center', 
     xtype: 'form', 
     items: [{ 
      xtype: 'container', 
      flex: 1, 
      layout: 'anchor', 
      items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       anchor: '95%', 
       xtype: 'htmleditor', 
       fieldLabel: 'Popis', 
       name: 'Description', 
       height: 240, 
       width: 450 
      }] 
     }, { 
      xtype: 'container', 
      flex: 1, 
      layout: 'anchor', 
      items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'container', 
       margin: '0 0 8 0', 
       layout: 'hbox', 
       items: [{ 
        xtype: 'textfield', 
        fieldLabel: 'Names', 
        name: 'Name' 
       }, { 
        xtype: 'textfield', 
        fieldLabel: 'Name', 
        name: 'Name' 
       }] 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }] 
     }] 
    }, { 
     region: 'south', 
     height: 25, 
     html: 'Copyright © 2013' 
    }] 
}); 

Answer 4

基本的には同じように自動スクロールプロパティを追加する必要があります。私はmainPanelContainerにレイアウトフィットの設定を追加しました

autoScroll: true