How to get values from Ext form

Question

Actually I have an ExtJs script to create form with a Window below.

var frmAccount = Ext.create('Ext.form.Panel',{
    bodyPadding: 5,
    frame  : true,
    items    :[
    {
        xtype       : 'textfield',
        fieldLabel  : 'Account Number',
        name        : 'accountNum'
    },{
        xtype       : 'textfield',
        fieldLabel  : 'Company',
        name        : 'company'
    },{
        xtype       : 'textfield',
        fieldLabel  : 'Office',
        name        : 'office'
    },{
        xtype       : 'textareafield',
        fieldLabel  : 'Address',
        name        : 'address',
        width       : 350
    },{
        xtype       : 'textfield',
        fieldLabel  : 'City',
        name        : 'city'
    },{
        xtype       : 'textfield',
        fieldLabel  : 'Country',
        name        : 'nation'
    }]
});

var winAddAccount = Ext.create('widget.window',{
    id     : 'addAccount',
    title  : 'Filter Record',
    width  : 400,
    height : 300,
    modal  : true,
    closeAction    : 'hide',
    items  : frmAccount,
    layout : 'fit',
    bodyPadding: 5,
    buttons:[
    {
        text    : 'Find',
        handler: function(){
            //console.log(form value);
        }
    },
    {
        text    : 'Cancel',
        handler: function(){
            winAddAccount.hide();
        }
    }
    ]
});

I just want to get values from the form after I click 'Find' button. But I don't know to get values from the form after I click 'Find' button. hopefully I can see the value with console.log script on handler. Kindly please help me to solve or suggest an idea. Thanks.

Cyndycynera

Answer 1

try this

text    : 'Find',
handler: function(btn){
    var win = btn.up('window'),
        form = win.down('form');
    console.log(form.getForm().getValues());
}

And in addition I recommend you to look through the tutorials provided by sencha and to take a look at the API which also contains plenty of examples

To get only the value of a specific field do (this example assume the field exist!)

text    : 'Find',
handler: function(btn){
    var win = btn.up('window'),
        form = win.down('form');
    console.log(form.getForm().findField('NamePropertyValue').getSubmitValue() /*or call getSubmitData() or just getValue()*/);
}

Roller

+1, another option is to query the window by id, but this is better. I rarely work with id's in my components myself. Most of the time because I can have multiple instances of the same window open. – Koziara

Oh God..thanks to you.. but, how to get a straight value from the form? Such as I just want to get 'office' value from the form.. – Cyndycynera

Answer 2

handler: function(button) {
  var form = button.up('form').getForm();
  console.log(form.getValues());
  // ...
}

Ashwell