Заполнение texfield из combobox в EXTJS6


мне пришлось продолжить проект, и у меня есть некоторые сомнения относительно EXTJS6.

случается, что тот, кто работал раньше, использовал Sencha Architech, который я не знаю, как использовать его очень хорошо, поэтому файлы я просматривал и понимал их вручную, но мне все еще трудно найти отношения между ними и реализовать то, что я спрошу их ниже.

то, что я хочу сделать, это взять данные, которые перечислены в combobox, который загружается с помощью базы данных данные, и из этих данных, которые я выбираю, я хочу заполнить textfield.

пример: выберите инженерный отдел, и textfield автоматически заполняет инженерный факультет (или адрес, где он принадлежит). Запрос к базе данных у меня есть, так как я сделал объединение таблиц и все, но структура или перемещение переменных между файлами не ясны.

согласно vi, он работает так:

у вас есть представление, которое объявляет внешний вид и переменные как слушатели. Затем вы переходите к ViewController, который содержит методы, которые будут применяться из таких listeners. Это затем привязывается к модели с другими переменными (не очень хорошо, как она действует). Следовательно, он связан с storage, который имеет переменные, которые с помощью ajax передаются php, который выполняет запрос SQL в базе данных.

я не знаю, является ли это путешествием данных, или они действительно путешествуют по-другому.

может ли кто-нибудь объяснить мне этот процесс?, а другое, если возможно пример заполнения textfield из combobox после этой структуры?.

я буду вам очень благодарен


я ввожу код combobox и texfield для дополнительной идеи:

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);




}

ваш вид:

            {
                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'
                }
            }

ваш магазин:

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)]);
}
});

Теперь Textfield

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

ваш вид:

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

я не знаю, следует ли делать store для texfield или нет, но Unity store соединяется с seccion1.php тот, который содержит запрос SQL

надеюсь, я могу быть яснее там.

Author: fedorqui 'SO deja de dañar', 2017-06-06

1 answers

Если я правильно понимаю, что вы хотите сделать, это: заполнить textfieldна основе того, что выбрано в comboboxВы можете сделать это следующим простым способом:

Во-первых, давайте перейдем к определению комбо:

tuCombobox = {
        xtype: "combobox",
        itemId: 'myId',
        fieldLabel:'etiqueta',
        queryMode: "local",
        store: myStore,
        displayField: 'LABEL',  //el valor a mostrar de cara al usuario
        valueField: 'VALUE', //el valor de los datos que manejarás
        listeners: {
            change: this.onUnidadSelect,
            scope: this
        }
    };

Обратите внимание, что все comboboxсвязано с store, который, в свою очередь, связан с моделью данных, с которой вы их загружаете. Как вы увидите, таким образом, мы добавляем к нему слушатель и с scope мы передаем ему контекст.

Теперь определена функция , которая получит новое значение, выбранное в combobox:

onUnidadSelect: function (combobox, newValue) {
    // ....
    Ext.getCmp('myId').setValue(newValue);
}

Внутри этой функции вы можете применить новое значение комбо ( newValue) к textfield, которое вы хотите с помощью метода setValue(). Который вы должны были создать ранее.



Хотя это было бы намного проще, если бы вы поставили определение своего combobox и вашего textfield (по крайней мере). Нам не нужно (и не хотим или не намерены) видеть полный код всего вашего приложения, только часть кода, которая иллюстрирует вашу проблему/сомнение/запрос.

 0
Author: Alex, 2017-06-06 15:23:35