ExtJs getValues() from Form

Question

i have a question. probably it will be a easy solution. how can i get the Values of the textfields, when i click the Save Button???

Ext.define('MyApp.view.main.MyForm', {
    extend: 'Ext.Window',
    layout: 'column',
    .
    .
    .

    defaults: { 
        layout: 'form',
        xtype: 'container',
        defaultType: 'textfield',
        labelWidth: 150,
        width: 300
    },

    items: [{
        items: [
            { fieldLabel: 'FirstName', allowBlank: false },
            { fieldLabel: 'LastName', allowBlank: false },

        ]
    }, {
        items: [ 
            { fieldLabel: 'Street' },
            { fieldLabel: 'Town' },
        ]
    }],
    buttons: [
        { text: 'Save', handler: function(){ alert('Saved!'); } },
    ]
});

Answer 1

Seriously, why go with the up.up.down approach, if you can get to the thing straight away?

var form = Ext.ComponentQuery.query('[name="myfieldform"]').getForm()[0];

Or

values = Ext.ComponentQuery.query('[name="myfieldform"]').getForm()[0].getValues();

In other words, take above answer and make it like this:

var formPanel = Ext.create('Ext.form.Panel', {
        name: 'myfieldform',

        defaults: { 
            layout: 'form',
            xtype: 'container',
            defaultType: 'textfield',
            labelWidth: 150,
            width: 300
        },

        items: [{
            items: [
                { 
                        fieldLabel: 'FirstName', 
                        allowBlank: false 
                },
                { 
                         fieldLabel: 'LastName', 
                         allowBlank: false 
                },

            ]
            }, {
                items: [ 
                    { fieldLabel: 'Street' },
                    { fieldLabel: 'Town' },
                ]
            }]
        });

Ext.define('MyApp.view.main.MyForm', {
        ... 

        items: [
            formPanel
        ],

        buttons: [
            { 
                text: 'Save', 
                handler: function(btn) { 
                    var form = Ext.ComponentQuery.query('[name="myfieldform"]').getForm()[0];

                    if (!form || !form.isValid())
                    {
                        alert('Check your form please!'); 
                        return;
                    }

                    values = form.getValues();
                    for(var name in values) {
                            alert(values[name]);
                    }
                } 
            }
        ]
});

Answer 2

You must use form field container, for example - Ext.form.Panel.

Then you can use getForm() and then getValues(), also check your fields - isValid() for checking allowBlank.

var formPanel = Ext.create('Ext.form.Panel', {
        name: 'myfieldform',

        defaults: { 
            layout: 'form',
            xtype: 'container',
            defaultType: 'textfield',
            labelWidth: 150,
            width: 300
        },

        items: [{
            items: [
                { 
                        fieldLabel: 'FirstName', 
                        allowBlank: false 
                },
                { 
                         fieldLabel: 'LastName', 
                         allowBlank: false 
                },

            ]
            }, {
                items: [ 
                    { fieldLabel: 'Street' },
                    { fieldLabel: 'Town' },
                ]
            }]
        });

Ext.define('MyApp.view.main.MyForm', {
        ... 

        items: [
            formPanel
        ],

        buttons: [
            { 
                text: 'Save', 
                handler: function(btn) { 
                    var form = btn.up().up().down('[name="myfieldform"]').getForm(),
                        values;

                    if (!form || !form.isValid())
                    {
                        alert('Check your form please!'); 
                        return;
                    }

                    values = form.getValues();
                    for(var name in values) {
                            alert(values[name]);
                    }
                } 
            }
        ]
});

---

Sencha Fiddle Example

---

Answer 3

Your handler function will have the button and the event options in it's signature. Use the button and the "Up" function to get the form element and retrieve the record model attached to the form (assuming you are using models).

handler: function(btn, eOpts){ 
     var form = btn.up('form');
     form.getForm().updateRecord();
     var record = form.getForm().getRecord();  
     alert('Saved!');
}

If you are not using a model and just want the values add an itemId to each field in your form and again use the up function with a "#" to retrieve a specific component. Then simply use the getValue method.

items: [
    { fieldLabel: 'FirstName', itemId: 'firstnamefield', allowBlank: false },
    { fieldLabel: 'LastName', itemId: 'lastnamefield', allowBlank: false },

]

handler: function(btn, eOpts){ 
     var firstNameField = btn.up('#firstnamefield');
     var firstNameValue = firstNameField.getValue();
     alert('Saved!');
}