Extjs Ext JS 6现代工具包时间选择器字段?

Extjs Ext JS 6现代工具包时间选择器字段?,extjs,extjs6-modern,Extjs,Extjs6 Modern,Ext JS 6 modern toolkit中是否有类似于日期时间选择器的时间选择器字段?我复制了Sencha touch 2时间选择器字段,但它在Ext JS 6 modern应用程序中不起作用。有什么解决办法吗?所以我想到了这个 在ext/modern/modern/src/field/TimePicker.js中创建一个文件 现在将下面的代码粘贴到文件中 Ext.define('Ext.field.TimePicker', { extend: 'Ext.field.Text', alte

Ext JS 6 modern toolkit中是否有类似于日期时间选择器的
时间选择器字段?我复制了Sencha touch 2时间选择器字段,但它在Ext JS 6 modern应用程序中不起作用。有什么解决办法吗?

所以我想到了这个

在ext/modern/modern/src/field/TimePicker.js中创建一个文件

现在将下面的代码粘贴到文件中

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

});

我对你的代码做了增强。我已经添加了配置
showSeconds
(true/false在选择器中显示秒数)和
minutesp
(数字-定义分钟字段中的步骤-1乘1或5乘5或其他)。
{
 xtype: 'timepickerfield',
 name: 'time',
 label: 'Time',
  // other field options
 },