Ext js 6: Datumsfeld im scrollbaren Container funktioniert nicht

Question

datefield im scrollbaren Container rendern seinen Picker nicht richtig. Hier ist die Geige.

https://fiddle.sencha.com/#fiddle/17l8

Ext.application({ 
launch : function() { 
    Ext.create('Ext.container.Container', { 
     layout:'anchor', 
     scrollable:true, 
     width: 400, 
     height:'100px', 
     renderTo: Ext.getBody(), 
     border: 1, 
     style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'}, 
     defaults: { 
      labelWidth: 80, 
      // implicitly create Container by specifying xtype 
      xtype: 'datefield', 
      flex: 1, 
      style: { 
       padding: '10px' 
      } 
     }, 
     items: [{ 
      xtype: 'datefield', 
      name: 'startDate', 
      fieldLabel: 'DOB' 
     },{ 
      xtype: 'textfield', 
      name: 'name', 
      fieldLabel: 'Name' 
     },{ 
      xtype: 'textfield', 
      name: 'age', 
      fieldLabel: 'Age' 
     }] 
    }); 
} 
}); 

Gehen Sie auf die Geige, zuerst das Datum eingeben, nach unten scrollen und Namen und Alter eingeben. Scrolle jetzt nach oben und versuche das Datum zu ändern. Der Bildschirm wird ausgeschaltet. Der Bildschirm kehrt zurück, wenn Sie einen Mausklick ausführen.

PS: Dies geschieht nur in EXt js 6. Nicht in einer früheren Version.

Answer 1

Es wurde herausgefunden ... in scorallable Container, Picker richtet sich nicht nach Layout auf Komponente. Wir machen es manuell mit der folgenden Überschreibung.

Ext.override(Ext.picker.Date, { 
    afterComponentLayout: function (width, height, oldWidth, oldHeight) { 
     var field = this.pickerField; 
     this.callParent([ 
      width, 
      height, 
      oldWidth, 
      oldHeight 
     ]); 
     // Bound list may change size, so realign on layout 
     // **if the field is an Ext.form.field.Picker which has alignPicker!** 
     if (field && field.alignPicker) { 
      field.alignPicker(); 
     } 
    } 
});