のExt JS 6：スクロール可能なコンテナ内の日付フィールドは、スクロール可能なコンテナに

Question

datefieldが動作していないが、正しくそのピッカーをレンダリングされていません。ここはフィドルです。

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' 
     }] 
    }); 
} 
}); 

ゴーフィドルに、まず、日付を入力して、下にスクロールし、名前と年齢を入力してください。もう一度上にスクロールし、日付を変更しようとします。画面が消えます。マウスをクリックすると画面が戻ってきます。

PS：これはEXT JS 6.ない以前のバージョンでのみ発生しています。

Answer 1

ピッカーは、レイアウト後のコンポーネントに整列されていない、... scorallable容器内 をそれを考え出しました。以下のオーバーライドを使用して手動で行っています。

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(); 
     } 
    } 
});