One to many data binding

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.

I think all you have to do is add viewModel to component, that is parent for all your input fileds and simply bind to it. Check this simple example - fiddle.sencha.com/#view/editor&fiddle/2007. — Sergey Novikov
close, but not exactly what I was looking for. Appreciate the effort — bullettrain
Just curious why this solution doesnt fit your needs? fiddle.sencha.com/#view/editor&fiddle/200t — Sergey Novikov
No problem, I only needed applying value from main input to other inputs, while having other fields independent from each other. For example, entering value in input 'Input field 1' should not change value of 'Input field 2'. There should be no binding among other inputs, except from main one to others. — bullettrain

Anand Singh Anand Singh · Accepted Answer · 2017-05-22T09:41:41

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.

One to many data binding

1 Answers