Gibt an, wie die Bildlaufleiste angezeigt wird?

Question

Ich muss eine Bildlaufleiste zeigen, sobald das Formular breiter als Container ist. Ich habe die Eigenschaft autoScroll: true für den Container festgelegt, aber es funktioniert nicht. Gibt es überhaupt ein Ergebnis, das ich brauche? Hier

ist das Arbeitsbeispiel

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

Der Code

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

Nach Layout und fügte hinzu: 'fit' der Scrollbar mainPanelContainer erscheint, aber es ist nicht möglich, zu der verborgenen rechten Seite des Formulars zu blättern.

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

Answer 1

In Ihrer Geige für deine Bearbeitung, Änderung:

padding: '0 150 0 150', 

im mittleren Bereich zu:

margin: '0 150 0 150', 

Ob Sie es glauben oder nicht, extjs Layouts behandeln nicht die Eigenschaft padding sehr gut. Ich bin schon vorher mit meinen Layouts darauf gestoßen. Es sieht so aus, als ob in deinem Beispiel der Rand funktioniert, um zu erreichen, was du willst. Eine weitere Möglichkeit, das gleiche Ergebnis zu erzielen, besteht darin, eine weitere Ebene mit einem Rahmenlayout zu verschachteln und Ost- und Westregionen mit dem leeren Bereich hinzuzufügen, um das Verhalten der Auffüllung nachzuahmen.

Answer 2

autoScroll: true ist der Weg, es zu tun, aber Sie werden richtig alle Ihre Layouts haben müssen, für sie zu arbeiten. Versuchen Sie layout: 'fit' auf Ihrem mainPanelContainer und/oder Ihrem form setzen.

Answer 3

Wenn Sie das verschachtelte Formular entfernen und einfach die Überfüllung auf den übergeordneten Container (im Ansichtsfenster in diesem Beispiel) setzen, scheint es, Sie zu bekommen, was Sie von dem, was ich verstehe, verfolgen.

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

Grundsätzlich müssen Sie genauso wie die autoscroll Eigenschaft hinzufügen:

autoScroll: true