extJS displaying selected comboBox value in a textfield

Question

I started with extJS a few days ago and on my application in header I have a combobox and a textfield.

Combobox has 3 values, after selecting one of those values in combobox, the value doesn't appear in textField

Here is my store:

Ext.define('Terms.store.groupStore', {
extend: 'Ext.data.Store',

alias: 'store.groupstore',

fields : [
    {
        name : 'groupName',
        type: 'string'
    },
    {
        name : 'accountId',
        type: 'int'
    }
],
data : [
    {
        groupName : 'GROUP1',
        accountId : '1'
    }, {
        groupName : 'GROUP2',
        accountId : '2'
    }, {
        groupName : 'GROUP3',
        accountId : '3'
    }
],
proxy : {
    type : 'memory',
    reader : {
        type : 'json'
    }
},
autoLoad : true
});

Combobox is positioned in a header, and the textField is next to it:

    Ext.define('Terms.view.main.HeaderBar', {
    extend: 'Ext.Toolbar',
    xtype: 'headerBar',

    items: [
    {
        xtype: 'panel',
        layout: 'hbox',
        flex: 15,
        layoutConfig: {
        align: 'stretch'
        },
        items: [

            {
                xtype: 'panel',
                flex: 4,
                layout: 'hbox',
                renderTo: Ext.getBody(),
                defaults: {
                labelAlign: "left"
                },
                items: [
                      {
                          xtype: 'combobox',
                          name: 'accountId',
                          displayField : 'groupName',
                          valueField : 'accountId',
                          flex: 2,
                          id: 'accountId',
                          fieldLabel: 'Group',
                          labelWidth: 45,
                          store : {
                                    type : 'groupstore'
                          },
                          listeners: {
                                 change: function (combo, newValue, oldValue) {

                                var value_index = groupstore.find('accountId', newValue);
                                var record = groupstore.getAt(value_index);

                                         Ext.getCmp('fieldGroup').setValue(record.get("groupName"));
                                }
                          }
                      },
                      {
                          xtype: 'textfield',
                          flex: 2,
                          name: 'fieldGroup',
                          id: 'fieldGroup',
                          allowBlank : true,
                          hideTrigger : true,
                          valueField: 'fieldGroup',
                          store : 'groupstore',                           
                          style: 'margin-left: 10px;'                             
                      }
                      ]
                }
        ]
    }]
 });

The combobox gets loaded with the data from the store, and I can click it and select it, but that value/data does not appear in the textField next to it. Any advices on this?

Answer 1

For this you need to use combo.getSelection() method to get the selected record inside of change event.

In this FIDDLE, I have created a demo using your code and put some modification in your code. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('Terms.store.groupStore', {
            extend: 'Ext.data.Store',

            alias: 'store.groupstore',

            fields: [{
                name: 'groupName',
                type: 'string'
            }, {
                name: 'accountId',
                type: 'int'
            }],
            data: [{
                groupName: 'GROUP1',
                accountId: '1'
            }, {
                groupName: 'GROUP2',
                accountId: '2'
            }, {
                groupName: 'GROUP3',
                accountId: '3'
            }]
        });

        Ext.define('Terms.view.main.HeaderBar', {
            extend: 'Ext.Toolbar',
            xtype: 'headerBar',
            items: [{
                xtype: 'panel',
                layout: 'hbox',
                layoutConfig: {
                    align: 'stretch'
                },
                items: [{
                    xtype: 'panel',
                    layout: 'hbox',
                    defaults: {
                        labelAlign: "left"
                    },
                    items: [{
                        xtype: 'combobox',
                        name: 'accountId',
                        displayField: 'groupName',
                        valueField: 'accountId',
                        flex: 2,
                        fieldLabel: 'Group',
                        labelWidth: 45,
                        store: {
                            type: 'groupstore'
                        },
                        listeners: {
                            change: function (combo, newValue, oldValue) {
                                //combo have method get selected record using {combo.getSelection()}
                                var selectedRecord = combo.getSelection();
                                //Instead of using Ext.getCmp() you can use up or down inside of component.
                                combo.up('panel').down('#fieldGroup').setValue(selectedRecord.get("groupName"));
                            }
                        }
                    }, {
                        xtype: 'textfield',
                        flex: 2,
                        name: 'fieldGroup',
                        itemId: 'fieldGroup',
                        allowBlank: true,
                        hideTrigger: true,
                        valueField: 'fieldGroup',
                        store: 'groupstore',
                        style: 'margin-left: 10px;'
                    }]
                }]
            }]
        });

        Ext.create({
            xtype: 'headerBar',
            fullscreen:true,
            renderTo: Ext.getBody()
        })
    }
});