ExtJS DateField - initialising date - extjs

Question

I have an ExtJS Date field. During some operation in the application, min value and max value get assigned to the date field. The min value and max value are 4 years prior to the current dat, but when the date picker opens up, it opens to the disabled current dates. The user has to manually scroll back 4 years to select a date. Anyways I can update the datepicker to open up by showing the date between the min value and max value ?
Adding code:
cmpDt.setMinValue(new Date(2000, 0, 1));
cmpDt.setMaxValue(new Date(2004, 0, 1));
this sets the min and max value. I cant use setValue() because it inialises/changes the textfield. I want the textfield to get value only on selection from the datepicker.
Thanks

Answer 1

You have to set an initial value using the value property of the Ext.form.field.DateView:
{
...,
minValue: new Date(2000, 0, 1),
maxValue: new Date(2004, 11, 31),
value: new Date(2002, 5, 15),
...
}
EDIT after more info from the OP:
You may override the onExpand method that initializes the value on the picker. The original one looks like (given that you use ExtJS 4 - but 3 should not be that much different):
...,
onExpand: function() {
var value = this.getValue();
this.picker.setValue(Ext.isDate(value) ? value : new Date());
},
...
You could override the method to read:
...,
onExpand: function() {
var value = this.getValue(),
myDefaultDate = /* do some processing to determine the default date*/;
this.picker.setValue(Ext.isDate(value) ? value : myDefaultDate);
},
...
Just add the override to the initial form field configuration.

Answer 2

For anyone interested in an EXTJS 3 solution to this problem, I've made the following code.
This allows you to pass initialDateToShowOnPicker as a config to the Ext.DatePicker when declaring it, if needed.
It also allows you to call setInitialDateToShowOnPicker(initialDateToShowOnPicker) on the datepicker component to set it dynamically.
Both require a Date() type to be used, and there cannot be a value already set on the datepicker.
if (Ext.versionDetail && Ext.versionDetail.major == 3) {
Ext.form.DateField.prototype.setInitialDateToShowOnPicker = function (initialDateToShowOnPicker) {
this.initialDateToShowOnPicker = initialDateToShowOnPicker;
};
Ext.form.DateField.override({
onTriggerClick: function() {
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.DateMenu({
hideOnClick: false,
focusOnSelect: false
});
}
this.onFocus();
Ext.apply(this.menu.picker, {
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.disabledDatesRE,
disabledDatesText : this.disabledDatesText,
disabledDays : this.disabledDays,
disabledDaysText : this.disabledDaysText,
format : this.format,
showToday : this.showToday,
startDay: this.startDay,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue)),
initialDateToShowOnPicker: this.initialDateToShowOnPicker // Date() type
});
this.menu.picker.setValue(this.getValue() || this.initialDateToShowOnPicker || new Date());
this.menu.show(this.el, "tl-bl?");
this.menuEvents('on');
}
}); }