Getting values from a form

[jop_008]

I have created forms already using getValues to read the values. Learning sencha is not simple and with this kind of problems....For a new application I have also a form like this:

Ext.define ('mvillacomfort.view.personaliaform', {
extend : 'Ext.form.FormPanel',
id : 'personaliaform',
labelAlign: 'left',
border : true,
labelStyle: 'font-weight:bold;',
xtype : 'personaliaform',


config: {
items: [
{
xtype: 'fieldset',
title: 'Kies eventuele opties',
items: [
{
xtype: 'checkboxfield',
name: 'option_sauna',
label: 'Sauna'
},
{
xtype: 'checkboxfield',
name: 'childpackage',
label: 'Kinderbedje + kinderstoel'
}],
},
{
xtype : 'textfield',
required: true,
autoComplete: true,
name: 'name',
label: 'Naam',
labelStyle: 'background: none !important; width: 45%',
},
etc.

and I tried several things but I can't extract for example name from the form

addmaintenant : function () {
var oform = Ext.getCmp('personaliaform');
var ovaluefields = Ext.getCmp('personaliaform').getValues ();
// ovaluefields is an object
alert ("name " + ovaluefields["name"]); // no value

var fields = oform.getFields();

for (name in fields) {
field = fields[name]; // field is anobject
alert ("value "+ field.getValue () ); // no values
alert (name + " "+ ovaluefields[name] ); // name of the fields are displayed okay but no values
}


John

[estesbubba]

Use Ext.interate(ovaluefields, function(fieldName, fieldValue(){}, this).

Best way to learn the API is to open Chrome Dev Tools console and write JavaScript code in there

[jop_008]

Thanks, I think you mean Ext.iterate and there is one closing ) missing at the end of the line.
If I change this. I got unexpected token (
All the examples I found is the usage of getValues () why can't I use this?

John

[estesbubba]

This works for me in Chrome dev tools console:

Ext.iterate(Ext.ComponentQuery.query('serviceAddress')[0].getValues(), function(key, value) { console.log(key + ': ' + value); })

[jerome76]

...
var ovaluefields = Ext.getCmp('personaliaform').getValues ();
...
alert ("value "+ field.getValue () ); // no values
...

The whitespace isn't really needed. Also, you should avoid using id's and use itemId's instead, from what I've seen in the past.

Anyway, what estesbubba uses should work.


I cleaned up your code here (I marked your old stuff in red and my changes in green):


Ext.define ('mvillacomfort.view.personaliaform', {
extend : 'Ext.form.FormPanel',
itemId : 'personaliaform',
border : true,
xtype : 'personaliaform',
config: {
items: [
{
xtype: 'fieldset',
defaults: {
labelStyle: 'font-weight:bold;',
//labelAlign: 'left' //defaults to left
},
title: 'Kies eventuele opties',
items: [
{
xtype: 'checkboxfield',
name: 'option_sauna',
label: 'Sauna'
},
{
xtype: 'checkboxfield',
name: 'childpackage',
label: 'Kinderbedje + kinderstoel'
}],
},
{
xtype : 'textfield',
required: true,
autoComplete: true,
name: 'name',
label: 'Naam',
labelStyle: 'background: none !important; width: 45%',
},
//...
});

//etc.


//and I tried several things but I can't extract for example name from the form


//...

addmaintenant : function () {
var oform = Ext.ComponentQuery('#personaliaform')[0],
ovalues = oform.getValues();
//ovalues is an object which holds all values
//of the fields in the form panel, including
//the fields in the fieldsets within the form
//panel. The fields in the ovalues object are
//referenced by their 'name' configs.

//should not reference values in an object like below
//alert ("name " + ovalues["name"]); // no value

//you can do it this way
console.log(ovalues.name);

//var fields = oform.getFields();


//for (name in fields) {
//field = fields[name]; // field is anobject
//alert ("value "+ field.getValue () ); // no values
//alert (name + " "+ ovaluefields[name] ); // name of the fields are displayed okay but no values
//}
}

//...

[jop_008]

Thanks for your help.
Ext.ComponentQuery was not found so I took a look at how this stuf works. I found out that I must use
var oform = Ext.ComponentQuery.query ('personaliaform'); // so not with the usage of # and I switched to itemId @ your suggestion.

Regarding object properties:
ovalues..name is the same as ovalues["name"]

Console.log handy better than all the alerts I used.

Is there a way to combine validation presence with required specified at field level. Now you fill it in twice in the model and in the definition of the form.

John