Ext JS 6 modernes Toolkit Zeitauswahlfeld?

Question

Gibt es ein time picker field wie Datetimepicker Feld in Ext JS 6 modernen Toolkit? Ich kopierte das Sencha Touch 2 Time Picker Feld, aber es funktioniert nicht in Ext JS 6 modernen App. Irgendwelche Lösungen?

Answer 1

Also hier ist, was ich kam mit

Erstellen Sie eine Datei in ext/modern/modern/src/Feld/TimePicker.js

nun den unten Code in der Datei einfügen

Ext.define('Ext.field.TimePicker', { 
extend: 'Ext.field.Text', 
alternateClassName: 'Ext.form.TimePicker', 
xtype: 'timepickerfield', 

requires: [ 
    'Ext.field.trigger.Clear' 
], 
setMe: function(t){ 
    this.val = t; 
}, 
getMe: function(){ 
    return this.val; 
}, 
initialize: function (a, b, c) { 
    var me = this; 
    me.getComponent().on({ 
     keyup: 'onKeyUp', 
     input: 'onInput', 
     focus: 'onFocus', 
     blur: 'onBlur', 
     paste: 'onPaste', 
     mousedown: 'onMouseDown', 
     scope: this 
    }); 
}, 

listeners: { 
    focus: function (a, b, c, d) { 
     var me = this, 
      hours = new Array(), 
      minutes = new Array(), 
      seconds = new Array(), 
      i=0; 
     // for hours 
     while(i < 24){ 
      var j = i; 
      if(i < 10) j = '0'+''+j; 
      hours.push({ 
       text: j, 
       value: j 
      }); 
      i++ 
     } 

     // for minutes 
     i = 0; 
     while(i < 60){ 
      var j = i; 
      if(i < 10) j = '0'+''+j; 
      minutes.push({ 
       text: j, 
       value: j 
      }); 
      i += 5; 
     } 

     // for Seconds 
     i = 0; 
     while(i < 60){ 
      var j = i; 
      if(i < 10) j = '0'+''+j; 
      seconds.push({ 
       text: j, 
       value: j 
      }); 
      i += 5; 
     } 

     var picker = Ext.create('Ext.Picker', { 
      useTitles: true, 
      listeners: { 
       change: function (picker, value, eOpts) { 

        me.setValue(value.hour + ':' + value.minute + ':' + value.second); 
       } 
      }, 
      align: 'center', 
      slots: [{ 
       xtype: 'spacer' 
      },{ 
       name: 'hour', 
       title: 'Hour', 
       data: hours 
      }, { 
       name: 'minute', 
       title: 'Minute', 
       data: minutes 
      },{ 
       name: 'second', 
       title: 'Second', 
       data: minutes 
      },{ 
       xtype: 'spacer' 
      }] 
     }); 

     picker.show(); 
    } 
} 

}); 

und es verwenden, wo jeder wie andere Felder

{ 
xtype: 'timepickerfield', 
name: 'time', 
label: 'Time', 
    // other field options 
},