覆盖 Extjs 时间字段以显示自定义最大值 23:59

Question

我需要您的帮助来覆盖 ExtJs 时间字段以显示一个自定义值 23:59。我试图覆盖createStore 函数，但我的时间选择器仍然具有标准值。可能是什么问题？

Ext.override(Ext.picker.Time, {
    createStore: function() {
        var me = this,
            utilDate = Ext.Date,
            times = [],
            min = me.absMin,
            max = me.absMax;

        while (min <= max) {
            times.push({
                disp: utilDate.dateFormat(min, me.format),
                date: min
            });
            min = utilDate.add(min, 'mi', me.increment);
        }
        var end = new Date();
        end.setHours(23, 59, 59, 999);
        times.push({
            disp: '23:59',
            date: end
        });

        return new Ext.data.Store({
            fields: ['disp', 'date'],
            data: times
        });
    }
});

Answer 1

好吧，我猜当你查看组件的 store 时，你会发现设置了一个名为 time-picker-filter 的过滤器。如果您取消设置，该组件将显示您的新记录。我不知道过滤器的用途，所以我建议不要这样做。

过滤器在函数updateList 中配置和应用，它以属性maxValue 或，如果该属性未定义，则absMax 作为上限。

所以我想你应该检查属性maxValue 和absMax 包含哪些值，如果它们已定义，请将它们更改为23:59:59,999。

Answer 2

在 ExtJS 6 中，您可以覆盖 createStore() 方法，就像您在早期版本中所做的那样。

我创建了一个23:59 的时间值，伪装成24:00。

这是working example。

---

Ext.picker.Time 覆盖

Ext.define('App.components.TimePicker', {
  override: 'Ext.picker.Time',

  statics: {
    createStore: function(format, increment) {
      var me = this;
      var store = me.callParent(arguments);
      var dateUtil = Ext.Date;
      var clearTime = dateUtil.clearTime;
      var initDate = this.prototype.initDate;

      if (format === 'H:i') {
        var time = clearTime(new Date(initDate[0], initDate[1], initDate[2]));
        time.setHours(23, 59);

        store.add({
          disp: '24:00',
          date: time
        });
      }

      return store;
    }
  }
});

示例用法

Ext.application({
  name: 'TimeApp',
  autoCreateViewport: false,
  launch: function() {
    Ext.create('Ext.container.Viewport', {
      layout: 'fit',
      items: [{
        xtype: 'form',
        title: 'Date-Field 24th Hour Example',
        bodyPadding: 12,
        items: [{
          xtype: 'timefield',
          width: 220,
          name: 'time',
          fieldLabel: 'Time',
          // ====================== // Begin custom options.
          format: 'H:i',            // Important
          emptyText : '12:00',      // Why not?
          increment: 15,            // Default value
          listConfig : {
            maxHeight: 160          // Limit rows to 5 (~32px each row)
          }
        }]
      }]
    });
  }
});