Fill a texfield from a combobox in EXTJS6

I had to continue a project and I have some doubts about EXTJS6 .

It happens that the one who worked before used Sencha Architech, which I do not know how to use it very well so the files I have been seeing and understanding them by hand, but even so I find it difficult to find the relationship between them and implement what I will ask them to next.

What I want to do is take a data that appears listed in a combobox that is loaded by means of a database, and from that data that I select I want to fill a textfield .

Example: select Engineering Department, and have the textfield automatically fill Engineering School (or the address where it belongs). The query of the database I have it ready since I made the union of tables and everything but the structure or trip of variables between files I do not have them clear.

As I saw, it works like this:

You have a view that declares the appearance and variables as listeners. Then it goes to a ViewController that contains the methods to be applied to these listeners. This is then linked to a model with other variables (I do not know how it works). Hence, it is linked to a storage that has variables that are passed through ajax to a php that executes the query SQL in the database.

I do not know if that is the trip of the data, or really travel in another way.

Could someone explain that process to me, and the other, if any example is possible to fill a textfield from a combobox following that structure?

I'll thank you very much

I enter the code of the combobox and the texfield for more idea:

onUnidadSelect: function(combo, record, eOpts) {
    Ext.ComponentQuery.query('combobox[name=cmb_nuevoCC]')[0].setValue('');
    Ext.ComponentQuery.query('combobox[name=cmb_nuevoSCC]')[0].setValue('');
    Ext.getStore('cc.sto_centroCosto').load({
        params:{unidad_codigo:record.data.unidad_codigo},
        callback: function(records, operation, success) {

        }
    });


    var cuenta_grid    = Ext.ComponentQuery.query('[itemId=grid_centroCosto]')[0].getStore().getCount();


    for (var i = 0; i < cuenta_grid-1; i++) {

        if (Ext.ComponentQuery.query('[itemId=grid_centroCosto]')[0].getStore().data.items[i].data.col_defecto == 'O' ){

            form_48.app.porcentaje_distrib = Ext.ComponentQuery.query('[itemId=grid_centroCosto]')[0].getStore().data.items[i].data.distribucion_codigo;

            var monto_origen = Ext.ComponentQuery.query('[itemId=grid_centroCosto]')[0].getStore().data.items[i].data.montos_int;
            var seleccionado = Ext.ComponentQuery.query('[itemId=grid_centroCosto]')[0].getStore().data.items[i];
            Ext.ComponentQuery.query('[itemId=grid_centroCosto]')[0].getStore().remove(seleccionado);

        }
    }


    //SE RESTA PORCENTAJE DISTRIBUCION QUE SE ELIMINO
    var pocentaje_dist = Ext.ComponentQuery.query('numberfield[name=txt_total_distribucion]')[0].getValue();

    var pocentaje_dist =  pocentaje_dist - form_48.app.porcentaje_distrib;

    Ext.ComponentQuery.query('numberfield[name=txt_total_distribucion]')[0].setValue(pocentaje_dist);

    //SE RESTA EL MONTO QUE SE ELIMINO
    var monto_actual = form_48.app.getController('FormateoNumero').miles_int(Ext.ComponentQuery.query('textfield[name=txt_total_monto]')[0].getValue());

    var monto_final = monto_actual - monto_origen;
    var monto_final_miles = form_48.app.getController('FormateoNumero').int_miles(monto_final);

    Ext.ComponentQuery.query('textfield[name=txt_total_monto]')[0].setValue(monto_final_miles);




}

Your view:

            {
                xtype: 'combobox',
                width: 408,
                fieldLabel: 'Unidad',
                labelWidth: 110,
                name: 'cmb_nuevoUnidad',
                readOnly: false,
                allowBlank: false,
                blankText: 'Campo obligatorio',
                emptyText: 'Seleccione...',
                displayField: 'unidad_nombre',
                queryMode: 'local',
                store: 'sto_unidades',
                valueField: 'unidad_codigo',
                listeners: {
                    select: 'onUnidadSelect'
                }
            }

Your store:

Ext.define('form_48.store.sto_unidades', {
extend: 'Ext.data.Store',

requires: [
    'form_48.model.mdl_unidades',
    'Ext.data.proxy.Ajax',
    'Ext.data.reader.Json'
],

constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        storeId: 'sto_unidades',
        autoLoad: true,
        model: 'form_48.model.mdl_unidades',
        proxy: {
            type: 'ajax',
            extraParams: {
                combo: 'unidades'
            },
            url: 'json/seccion1.php',
            actionMethods: {
                create: 'POST',
                read: 'POST',
                update: 'POST',
                destroy: 'POST'
            },
            reader: {
                type: 'json',
                rootProperty: 'root'
            }
        }
    }, cfg)]);
}
});

Now the Textfield

onFacultadKeyup: function(textfield, e, eOpts) {
    textfield.setValue(textfield.getValue().toUpperCase());
},

Your view:

{
                xtype: 'textfield',
                anchor: '100%',
                fieldLabel: 'Dirección/Facultad',
                labelWidth: 110,
                name: 'txt_direccionFacultad',
                enableKeyEvents: true,
                listeners: {
                    keyup: 'onFacultadKeyup'
                }
            }

I do not know if a store should be made to the texfield or not, but the Units store connects to the section1.php that contains the SQL query

I hope I can be clearer there.