datefield submitted as empty string extjs 4

Question

i've been scanning this site looking for solution but the problem persists. I have two datepicker in a form, they should submit a date when the form is submitted, but:

      start= Ext.util.Format.date(Ext.getCmp('start').getValue(),'Ymd');
      end= Ext.util.Format.date(Ext.getCmp('end').getValue(),'Ymd');

those lines of code result in two empty strings in GET call to the server. I cannot understand why. Below you'll find the code for the datefields:

 {
xtype: 'datefield',
fieldLabel: 'Start date',
format: 'Ymd',
id:"start",
//altFormats: 'Ymd',
listeners: {
    'change': function(me) {
        alert(me.getSubmitValue());
    }
}},
{
xtype: 'datefield',
fieldLabel: 'End date',
format: 'Ymd',
id: "end",
//altFormats: 'm/d/Y',
listeners: {
    'change': function(me) {
        alert(me.getSubmitValue());
    }
}},

Do you see the two listener under the definition of the fields? Whel they work perfectly, i mean, the value to be submitted for then is actually the string i'm searching for but i cannot get with the first two lines of code i've shown you. I tryed even to write:

   getSubmitValue()

instead of:

   getValue()

But the result doesn't change at all. Any idea why?

Answer 1

the change even comes with default arguments, so you do not need to make additional calls on the datefield object (i.e. 'this').

    `change( this, newValue, oldValue, eOpts )`

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Field-event-change

just a quick note, you should add the 'name' property to your field to utilize extjs's getters and setters. Try to use itemId (locally scoped) instead of id (globally scoped). This will save you a few headaches in the future if you have multiple instances of the same form.

Answer 2

Add the configuration submitFormat to your fields likes this:

{
    xtype: 'datefield',
    fieldLabel: 'Start date',
    format: 'Ymd',
    submitFormat: 'Ymd',
    id:"start",
    listeners: {
        'change': function(me) {
            alert(me.getSubmitValue());
        }
    }
},
{
    xtype: 'datefield',
    fieldLabel: 'End date',
    format: 'Ymd',
    submitFormat: 'Ymd',
    id: "end",
    listeners: {
        'change': function(me) {
            alert(me.getSubmitValue());
        }
    }
}