Extjs: (TimeField) reset minValue and maxValue

Question

I have an ExtJS TimeField where I use the setMinValue(...) and setMaxValue(...) to only show the valid time-elements to the user. This works just fine, but how do I reset the minValue and maxValue so that the user can see all the time-elements again?

I don't want to clear the field, just show all the elements from the store again.

score 5 · Accepted Answer · answered Jan 27 '11 at 12:14

I don't see any "clean" way to accomplish this, but I do have a temporary workaround until you find something more suitable.

Try setting the TimeField's minValue and maxValue to undefined or null, and then call generateStore() on your TimeField:

    // private
    generateStore: function(initial){
        var min = this.minValue || new Date(this.initDate).clearTime(),
            max = this.maxValue || new Date(this.initDate).clearTime().add('mi', 
                        (24 * 60) - 1),
            times = [];

        while(min <= max){
            times.push(min.dateFormat(this.format));
            min = min.add('mi', this.increment);
        }
        this.bindStore(times, initial);
    },

Yes it is a private method, so normally you shouldn't use it, but the method would normally be called if you simply reset minValue or maxValue, so you're just skipping a step. By setting both properties to null, the declaration for var min, max = will be equal to the default. You can't go about this by calling setMinValue() or setMaxValue() because it uses a private method that attempts to parse a Date out of the value you pass to the methods (it will fail at parsing null):

    // private
    setLimit: function(value, isMin, initial){
        var d;
        // will fail here
        if(Ext.isString(value)){
            d = this.parseDate(value);
        // will fail as well
        }else if(Ext.isDate(value)){
            d = value;
        }
        // will never make it here, because 'd' wasn't set above
        if(d){
            var val = new Date(this.initDate).clearTime();
            val.setHours(d.getHours(), d.getMinutes(), d.getSeconds(),
                         d.getMilliseconds());
            this[isMin ? 'minValue' : 'maxValue'] = val;
            if(!initial){
                this.generateStore();
            }
        }
    }

Update:

A cleaner approach would be to extend TimeField and add a resetMinAndMax method that accomplishes the above (set minValue/maxValue to null, call to generate store), or add the method in an override. That way you can avoid making calls to the "private" generateStore() everywhere.

**@McStretch:** Your suggestions would definitely be two good approaches, but I wonder why they didn't check the incoming parameter for both `setMinValue` and `setMaxValue` to see if it contains `null` or `undefined` or similar and then act accordingly. But thanks a lot for your elaborate answer! — Chau, Jan 27 '11 at 13:07
@Chau: Yeah I guess it was just an oversight on their part. Maybe the developers thought it would be an odd use case to reset the min/max after the component was built. — McStretch, Jan 27 '11 at 13:17
**@McStretch**: Instead of *extending* the `TimeField`, could a similar and maybe better approach be to *add* a `resetMinValue` and a `resetMaxValue` to the prototype of the `TimeField`? My reasoning is that I cannot see a case where the reset methods wouldn't be handy or atleast irrelevant. — Chau, Feb 02 '11 at 08:39
@Chau: That sounds like a great idea. You can add those methods using Ext.override(): **Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name**. On my old project we had one file where we kept all of the overrides so that we could easily check if someone modified an Ext class's prototype. — McStretch, Feb 02 '11 at 15:45

score 3 · Answer 2 · answered Aug 07 '14 at 13:56

3

you can use simply

this.setMinValue(false);

good luck

answered Aug 07 '14 at 13:56

Dahar Youssef

487
4
10

score 1 · Answer 3 · answered Aug 18 '11 at 19:32

The extjs only reset the property "value" from a component(if i'm not wrong), well, i don't know if my code is the better way, but..like the above answer, i overrode the reset method from DateField class using the code of Field class and add a 2 more properties to keep the original values(originalMinValue and originalMaxValue).

the originalMinValue and originalMaxValue are started onRender event of my Date Field.

this.setValue = this.setValue.createSequence(this.updateHidden);
this.originalMinValue = this.minValue;
this.originalMaxValue = this.maxValue;
// this is part of me onRender event code

and that's the override

Ext.override(Ext.form.DateField,{   
originalMinValue : null,
originalMaxValue : null,
reset : function() {                
    this.setValue(this.originalValue);      
    this.setMinValue(this.originalMinValue);
    this.setMaxValue(this.originalMaxValue);
    this.clearInvalid();        
}

})

this way, we can use the component's reset method e then, value, minValue, and MaxValue going back to the originalValue.

sorry for my bad english.

score 0 · Answer 4 · answered Jan 27 '11 at 15:49

0

Are you after the initial values for the timefield when the page is loaded? If that's the case, you should be able to use the reset() method of the FIELD class. You should have access to this since the timefield component is extended from FIELD.

answered Jan 27 '11 at 15:49

It Grunt

3,300
3
21
35

Extjs: (TimeField) reset minValue and maxValue

4 Answers4