Autoscroll nicht mit vbox Layout funktioniert

Question

ich die formpanels zum Zentrum ausrichten müssen, so habe ich das vbox Layout, und nachdem ich es die Autoscroll verwendet nicht wie bisher arbeiten, ist der Code wie folgt:

Usr.VWPanel = Ext.extend(Ext.Panel, { 
     id: null, 
     rid: null, 
     closable: true, 
     autoScroll: true, 
     buttonAlign: 'center', 
     layout: { 
       type:'vbox', 
       padding:'5', 
       pack:'center', 
       align:'center' 
     }, 
     initComponent: function() { 
      Ext.apply(this, { 
       items: [ 
       { 
        xtype: 'spacer', 
        height: 16 
       }, 
       { 
        xtype: 'usr.usrform', 
        itemId: 'usr.vwpain.usrformt', 
        width: 600, 
        height: 500 
       }, 
       { 
        xtype:'spacer', 
        height: 16 
       }, 
       { 
        xtype: 'usr.loginform', 
        itemId: 'usr.vwpain.loginform', 
        width: 600 
       }, 
       { 
        xtype: 'spacer', 
        height: 16 
       }, 
       { 
        xtype: 'usr.subsform', 
        itemId: 'usr.vwpain.subsform', 
        width: 600 
       }], 
... 

PLZ beraten.

Answer 1

Das Vbox-Layout wird niemals den Scroller anzeigen.

{ 
    xtype: 'window', 
    title: 'My Window', 
    width: 500, 
    height: 500, 
    layout: 'vbox', 
    layoutConfig: { 
     pack: 'center', 
     align: 'center' 
    }, 
    items: [ 
     { 
      xtype: 'panel', 
      title: 'My Panel', 
      anchor: '80% 100%', 
      height: 300, 
      width: 300, 
      autoScroll: true, 
      items: [ 
       { 
        xtype: 'panel', 
        html: 'this isform1', 
        height: 100 
       }, 
       { 
        xtype: 'panel', 
        html: 'this isform1', 
        height: 100 
       }, 
       { 
        xtype: 'panel', 
        html: 'this isform1', 
        height: 100 
       } 
      ] 
     } 
    ] 
} 

Answer 2

in Ihrem css Sie können Ihre My Panel Margen {0 auto} die die innerhalb des Fensters My Panel wird Zentrum. Das bedeutet, dass Sie für Ihr Fenster keine spezielle Layout-Konfiguration benötigen.

Answer 3

Ich habe einen Listener auf Resize-Ereignis hinzugefügt, um den vertikalen Bildlauf zu erhalten, wie für Vbox müssen wir Höhe bereitstellen, um Bildlauf zu erhalten, aber wenn Fenstergröße ändern ändern Scroller Höhe konstant bleiben.

Ext.define('DataConfigurations', { 
extend: 'Ext.form.Panel', 
bodyStyle: 'padding:5px 5px;', 
listeners: { 
resize: { 
    fn: function(el) { 
     this.setHeight(this.up('window').getHeight()-150); // 150 is extra for my panel coz of headers so have minus it. 
     console.log("new height = " + this.up('window').getHeight()-150); 
    } 
} 
}, 
title: "Update Data Configurations", 

Hofft diese Hilfe.