PDA

View Full Version : RowEditor - Validating a date range with a VType



shaunhendrix
15 Dec 2010, 12:52 AM
Hi all,

I've hit a problem with a custom VType data range validator. I'm using it to validate 2 pairs of date pickers in a grid that uses the row editor plugin (http://edspencer.net/2009/09/using-the-extjs-row-editor.html).

If I use it on only 1 pair of dates (so two date pickers ), it works fine. However if I introduce a second pair of dates, the calender popup stops working properly in that if I try and move between months and years, it immediately flicks me back to the month/year I was on. It is really hard to debug what is going on because the VType function is constently being hit whenever the grid is in edit mode.

The problem seems to be specific to the use of a vtype with the roweditor as it doesn't happen when using a form.

This is my vtype:

Ext.apply(Ext.form.VTypes, {
// Validates a date range
daterange: function (val, field) {
var date = field.parseDate(val);
if (!date) {
return;
}
if (field.startDateField && !this.dateRangeMax) {
var start = Ext.getCmp(field.startDateField);
start.setMaxValue(date);
this.dateRangeMax = date;
start.validate();
}
elseif (field.endDateField && !this.dateRangeMin) {
var end = Ext.getCmp(field.endDateField);
end.setMinValue(date);
this.dateRangeMin = date;
end.validate();
}
returntrue
}
});

And this is my grid columns:

{
xtype: 'datecolumn'
, header: 'Holiday Start Date'
, dataIndex: 'HolidayStartDate'
, sortable: true
, width: 140
, editor: {
xtype: 'datefield'
, id: 'HolidayStartDate'
, required: true
, format: 'd M y'
, allowBlank: false
, vtype: 'daterange'
, endDateField: 'HolidayEndDate'
}
}
, {
xtype: 'datecolumn'
, header: 'Holiday End Date'
, dataIndex: 'HolidayEndDate'
, width: 140
, sortable: true
, editor: {
xtype: 'datefield'
, id: 'HolidayEndDate'
, required: true
, format: 'd M y'
, allowBlank: false
, vtype: 'daterange'
, startDateField: 'HolidayStartDate'
}
}
, {
xtype: 'datecolumn'
, header: 'Holiday Start Date 2'
, dataIndex: 'HolidayStartDate2'
, id: 'HolidayStartDate2'
, sortable: true
, width: 140
, editor: {
xtype: 'datefield'
, id: 'HolidayStartDate2'
, required: true
, format: 'd M y'
, allowBlank: false
, vtype: 'daterange'
, validator: dateValidator
, endDateField: 'HolidayEndDate2'
}
}
, {
xtype: 'travellerdatecolumn'
, header: 'Holiday End Date 2'
, dataIndex: 'HolidayEndDate2'
, id: 'HolidayEndDate2'
, width: 140
, sortable: true
, editor: {
xtype: 'datefield'
, id: 'HolidayEndDate2'
, required: true
, format: 'd M y'
, allowBlank: false
, vtype: 'daterange'
,validator: dateValidator
, startDateField: 'HolidayStartDate2'
}

Any help at all would be much appreciated.

Shaun