Date range vtype, cannot understand how it works, extjs 4

Question

i have a form with two date fields, they have to define a date range, so the end cannot be before the start; and they both are made by two datepicker, which should disable the dates before the "start" in the "end". I've found this manual page with some code to be pasted, but i cannot paste this code in my page without getting an error. Maybe my page is too complicated but i don't think so, i think it's only me who cannot figure out where to paste the codewithout making all the other code fail. The following is the code of my page:

Ext.define('MyDesktop.count', {
extend: 'Ext.ux.desktop.Module',

requires: [
    'Ext.ux.desktop.DatabaseModel',
    //'Ext.ux.desktop.UserModel',
    'Ext.data.TreeStore',
    'Ext.layout.container.Accordion',
    'Ext.toolbar.Spacer',
    'Ext.tree.Panel'
],

id:'count',

init : function(){
this.launcher = {
        text: 'count',
        iconCls:'accordion'

    };
},

createWindow : function(){
    var App = this.app;
    var desktop = this.app.getDesktop();
    var win = desktop.getWindow('count-win');
    if (!win) {
        win = desktop.createWindow({
            id: 'count-win',
            title: 'count',
            width: 350,
            height: 200,
            animCollapse: false,
            maximizable: false,
            resizable: false,
            //constrainHeader: true,
            //bodyBorder: true,
            layout : 'anchor',
            items:[
                {
                xtype : 'fieldset',
                border: false,
                defaultType: 'textfield',
                items: [
                        {
                        xtype: 'datefield',
                        fieldLabel: 'Start date',
                        format: 'Ymd',
                        id:"start",
                        //altFormats: 'Ymd',
                        vtype: 'daterange',
                        endDateField: 'end'
                        },
                        {
                        xtype: 'datefield',
                        fieldLabel: 'End date',
                        format: 'Ymd',
                        id: "end",
                                             //minValue: Ext.getCmp('start').getValue(),
                        //altFormats: 'm/d/Y',
                        vtype: 'daterange',
                        startDateField: 'start'
                        },
                        {
xtype: 'combo',
fieldLabel: 'Client',
   id:"client",
hiddenName: 'client',
store: new Ext.data.SimpleStore({
    data: [
        ['applix', 'applix'],
        ['banzai', 'banzai'],
        ['banzai-cooking', 'banzai - cooking'],
        ['integralAS', 'integralAS'],
        ['LinkSmart', 'LinkSmart'],
        ['nbcuniversal', 'nbcuniversal'],
        ['primenetwork', 'primenetwork'],
        ['quag', 'quag'],
        ['turnEU', 'turnEU'],
        ['turnUS', 'turnUS']
    ],
    id: 0,
    fields: ['value', 'text']
}),
valueField: 'value',
displayField: 'text',
triggerAction: 'all',
editable: false
}       

                        ]


                }




            ],

            buttons: [{
                            text: 'Submit',
                            handler: function() {
                                console.log(this);
                                                           start= Ext.util.Format.date(Ext.getCmp('start').getValue(),'Ymd');
                                end= Ext.util.Format.date(Ext.getCmp('end').getValue(),'Ymd');
                                //period = Ext.getCmp('period').value;
                                client = Ext.getCmp('client').value;
                                Ext.Ajax.request({
                                            method : "GET",
                                            url : 'http://whatever.com/count?client='+client+'&start='+start+'&end='+end,

                                            timeout : 30000,
                                            success :
                                                                                      function (response) {
                                                                                      //console.log(Ext.getCmp('to_add'))
                                                                                       Ext.Msg.alert(response.responseText);
                                                                                       desktop.getWindow('count-win').doClose();
                                                                                      }//handler

                                                ,
                                            failure : 
                                                function(response) {
                                                    alert("Wrong request");
                                                }
                                        });
                                }



    }]
    });
    }

    return win;
}
});

The vtypes are already there, where should i put the listener and/or the function to handle the daterage property without cutting away all the rest of the code?Should i use a listener as in some examples here on stackoverflow (but i tryed and the window of the form wasn't working any more) or should i use the code from the manual? Anyone has any experience with this issue?

Answer 1

Ok then, the answer is more simple then it seems at first sight You have to leave the solution with vtype (which is difficult and it doesn't work). Then you have to add a listener to yours:

xtype: "datefield",

the code is here:

{
                        xtype: 'datefield',
                        fieldLabel: 'Start date',
                        format: 'Ymd',
                        id:"start",
                        //altFormats: 'Ymd',
                        vtype: 'daterange',
                        endDateField: 'end',
                        listeners:{
                            'change': function(th,a){
                             Ext.getCmp('end').setMinValue(a);
                        }
                        }},

It changes the minValue of the second datefield when the first datefield is changed. It is simple, it worked for me.