combining two values in a form extjs 4.1

Question

i have just built a form with two values, one is a period of time and the other is the name of a client. Now i wanted to change the textfields that they are made by with a datefield and a dropdown menu. The dropdown menu is made but for the field "period" i have some issues. That is the page in the manual to build a datefield. The problem is, the form field takes two dates in a single string, it is called "period". But the datefield as they are made are each one a single field, with a single id to each one in the form, so i won't have the field i was searching for but two divided field. the code is below:

 items: [{
    xtype: 'datefield',
    anchor: '100%',
    fieldLabel: 'From',
    name: 'from_date',
    maxValue: new Date()  // limited to the current date or prior
}, {
    xtype: 'datefield',
    anchor: '100%',
    fieldLabel: 'To',
    name: 'to_date',
    value: new Date()  // defaults to today
}],

How can i combine the two dates in a single field for the form to be processed by? Is there an hack or a workaround? Thank you.

Update ok i've set an hidden field with the "period" id. The value of it should be a combination of the values of the two datefields. The problem is i don't know how to get the value of the datefield inside an other object. The code is the following (to make it work you have to take away the line "value:" in the "period" field):

{
                        xtype: 'datefield',
                        fieldLabel: 'Start date',
                        format: 'Ymd',
                        //altFormats: 'Ymd',
                        listeners: {
                            'change': function(me) {
                                alert(me.getSubmitValue());
                            }
                        }},
                        {
                        xtype: 'datefield',
                        fieldLabel: 'End date',
                        format: 'Ymd',
                        //altFormats: 'm/d/Y',
                        listeners: {
                            'change': function(me) {
                                alert(me.getSubmitValue());
                            }
                        }},
                        {
                        xtype: 'textfield',
                        hidden:true,
                        fieldLabel: 'Period',
                        id: 'period'
                        value:
                        },
                        {
                            xtype: 'textfield',
                            name: 'client',
                            fieldLabel: 'Client',
                            id: 'client'
                        }

Exactly how do i combine the two values? Thanks

Answer 1

A quick and easy approach, IMO, would be to simply create a hidden field that will store the value of both. Then, in your submit handler, just grab the values from both fields and combine them into whatever value you need and set it on the hidden field.

If your form is submitting a model instance, you could do the same thing, but simply set the value of the desired persistent property instead of having to use a hidden form field.

Neither of these, btw, would be considered a hack--just leveraging the API to accomplish your business need.

The "fuller" solution would be to create a custom field that requires input for both date fields, but has a custom implementation for getValue() that retrieves the value from the underlying date fields and creates a composite value. Here's an example of doing that for a property grid editor: https://fiddle.sencha.com/#fiddle/t1

The principle would be the same for a form.