一对多数据绑定

Question

我有一种情况，我想从一个输入（fiddle 中的主输入字段）获取值并将其绑定到其他输入字段。

https://fiddle.sencha.com/#view/editor&fiddle/2001

由于相当复杂的体系结构，这些输入字段位于不同的组件中。我想知道将主输入字段的值绑定到所有其他字段的最佳方法是什么，有没有类似的例子我可以看一下？

谢谢。

Answer 1

正如您所说，输入字段来自不同的组件，您可能不想为所有组件创建 viewModel。

我已经创建了一个侦听器并获得了所有要设置值的相应字段的引用，并在主输入字段的更改事件中设置了值。

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

});

我在共享 fiddle 中测试过，它工作正常。

一对多数据绑定

One to many data binding

data-binding

extjs

extjs6-classic