One to many data binding - extjs

Question

I have a case where I want to get the value from one input (main input field in fiddle) and bind it to other input fields.
https://fiddle.sencha.com/#view/editor&fiddle/2001
Due to fairly complex architecture, these input fields are in different components. I was wondering what would be the best way to bind value from the main input field to all other fields, is there a similar example I could take a look at?
Thx.

Answer 1

As you said, the input fields are from different components, you may not want to create viewModel for all the components.
I have created a listener and got the references of all the corresponding fields you want to set value and setting the value in change event of main input field.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
title: 'Main Input field',
width: 200,
items:[{
xtype: 'textfield',
listeners:{
change:function(cmp, newValue, oldValue, eOpts){
if(newValue){
var inputFields = Ext.ComponentQuery.query('textfield[type=inputField]');
for(var k in inputFields){
inputFields[k].setValue(newValue);
}
}
}
}
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.panel.Panel', {
title: 'Input field 1',
width: 200,
items:[{
xtype: 'textfield',
type:'inputField'
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.panel.Panel', {
title: 'Input field 2',
width: 200,
items:[{
xtype: 'textfield',
type:'inputField'
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.panel.Panel', {
title: 'Input field 3',
width: 200,
items:[{
xtype: 'textfield',
type:'inputField'
}],
renderTo: Ext.getBody()
});
}
});
I have tested in the shared fiddle, its working fine.