override Extjs Timefield to show custom max value 23:59

问题

I need your help with overriding an ExtJs Time field to show one custom value, 23:59. I tried to override the createStore function, but my time picker still has the standard values. What could be the issue?

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

回答1:

Well, I guess when you look at the component's store, you will find that a filter called time-picker-filter is set. If you would unset that, the component would show your new record. I don't know what the filter is for, so I would advise against that.

The filter is configured and applied in the function updateList, and it takes the property maxValue or, if that one is undefined, absMax, as the upper limit.

So I guess you should check which values the properties maxValue and absMax contain, and if they are defined, change them to 23:59:59,999.

回答2:

In ExtJS 6, you can override the createStore() method as you have already done in your earlier version.

I have create a time value of 23:59 masquerading as 24:00.

Here is a working example.

Ext.picker.Time Override

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

Example Usage

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

来源：https://stackoverflow.com/questions/32500053/override-extjs-timefield-to-show-custom-max-value-2359

标签

javascript

extjs

extjs4.2