CODEWITHSUNDEEP
extjsdata-bindingextjs6-classic
bullettrain
bullettrain

Reputation: 966

One to many data binding

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.

Upvotes: 0

Views: 137

Answers (1)

Anand Singh
Anand Singh

Reputation: 327

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.

Upvotes: 1

Related Questions