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

score 1 · Accepted Answer · answered Dec 05 '13 at 16:38

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.

i've updated the question, can you give me some further explanation on this issue?thanks — softwareplay, Dec 06 '13 at 10:25
First, for the Period field, you should use the Ext.form.field.Hidden class, instead of a textfield with hidden: true. As to combining the values, in your submit handler, simply get the values from the form using getValues(). getValues() will return a map of the key-value pairs for each form field. Pluck the values from the two relevant fields that you want to combine, and then set the value of the hidden field: form.setValues({Period: theCombinedValue}); — existdissolve, Dec 06 '13 at 14:39

combining two values in a form extjs 4.1

1 Answers1