ExtJs4 日期范围验证

日期验证代码（参照的ExtJs4 的例子：ext-4.0.1-gpl/ext-4.0.1/examples/form/adv-vtypes.html）：

Ext.apply(Ext.form.field.VTypes, {
                    daterange: function(val, field) {
                        var date = field.parseDate(val);

                        if (!date) {
                            return false;
                        }
                        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
                            var start = field.up('form').down('#' + field.startDateField);
                            start.setMaxValue(date);
                            start.validate();
                            this.dateRangeMax = date;
                        }else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
                            var end = field.up('form').down('#' + field.endDateField);
                            end.setMinValue(date);
                            end.validate();
                            this.dateRangeMin = date;
                        }
                        /*
                         * Always return true since we're only using this vtype to set the
                         * min/max allowed values (these are tested for after the vtype test)
                         */
                        return true;
                    },

                    daterangeText: 'Start date must be less than end date'
                 });

在日期中使用上面的验证：

{
                                xtype: 'container',
                                fieldLabel: 'Name',
                                hideLabel:false,
                                layout: 'hbox',
                                combineErrors: true,
                                defaults: {
                                    hideLabel: 'true'
                                },
                                items: [{
                                    fieldLabel: '关系建立开始',
                                    hideLabel:false,
                                    editable:false,
                                    name: 'searchMarginBeginStart',
                                    id: 'searchMarginBeginStart',
                                    vtype: 'daterange',   //
                                    xtype: 'datefield',
                                    format:'Y-m-d',
                                    width: 300,
                                    endDateField: 'searchMarginBeginEnd', //
                                    listeners:{
                                        specialkey:function(field,e){
                                            var keyCode = e.getKey();
                                            if(keyCode == e.BACKSPACE){
                                                if(!this.editable){
                                                    e.stopEvent();
                                                    return false;
                                                }
                                            }
                                            
                                        }
                                    }
                                }, 
                                {
                                    fieldLabel: '关系建立结束',
                                    hideLabel:false,
                                    editable:false,
                                    name: 'searchMarginBeginEnd',
                                    id: 'searchMarginBeginEnd',
                                    vtype: 'daterange', //
                                    xtype: 'datefield',
                                    format:'Y-m-d',
                                    width: 300,
                                    startDateField: 'searchMarginBeginStart', //
                                    listeners:{
                                        specialkey:function(field,e){
                                            var keyCode = e.getKey();
                                            if(keyCode == e.BACKSPACE){
                                                if(!this.editable){
                                                    e.stopEvent();
                                                    return false;
                                                }
                                            }
                                            
                                        }
                                    }
                                }]
                            }

选好时间后，点击查询，ie提示

这个ie溢出是为什么？

给个方法你：Ext.apply(Ext.form.VTypes,{//自定义验证
dateCompar:function(complaintEndDate,field){
if(field.confirmTo){//要比较的另外一个组件，如果存在进行比较
var complaintBeginDate = Ext.get(field.confirmTo).getValue();//得到比较组件
return dateCompar(complaintBeginDate,complaintEndDate);
}
}
});
function dateCompar(dateOne,dateTwo){
//如果开始和结束时间都不为空，进行比较
if(Ext.util.Format.trim(dateOne).length > 0 && Ext.util.Format.trim(dateTwo).length > 0){
dateOne = dateOne.replace(/-/g,"/");
dateTwo = dateTwo.replace(/-/g,"/");
if(Date.parse(dateOne) > Date.parse(dateTwo)){
return false;
}else{
return true;
}
}else{
return true;
}
}

你在这个控件fieldLabel: '关系建立开始', vtype: 'daterange', 做了一次验证，然后又在下面 fieldLabel: '关系建立结束', 做了一次比较，你已经对format:'Y-m-d',进行了验证控制，就不需要证明是否是格式正确，你需要比较的就是后面的时间不能大于前面的时间而已