Заполнение 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
надеюсь, я могу быть яснее там.
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
(по крайней мере). Нам не нужно (и не хотим или не намерены) видеть полный код всего вашего приложения, только часть кода, которая иллюстрирует вашу проблему/сомнение/запрос.