ExtJS 5: Set child View Model data from bound value

Question

I have a class that has its own view model, and I create 2 instances of this class in my main view. In the main view, I want to pass down values for my 2 class instances, but I can't seem to get this working... I think I'm just not understanding some very simple concept.

The expected result is the value1 + value2 field has the concatenation of value1 and value2, the first myValue shows value1, and the 2nd myValue shows value2. Here's my code and example :

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.define('MyViewModel', {
      extend: 'Ext.app.ViewModel',
      alias: 'viewmodel.myView',
      formulas: {
        doSomething: function(getter) {
          console.log(getter('value1'), getter('value2'));
          return getter('value1') + getter('value2');
        }
      }
    });

    Ext.define('MyView', {
      extend: 'Ext.panel.Panel',
      xtype: 'myView',
      viewModel: {
        type: 'myView'
      },
      config: {
        myValue: null
      },
      publishes: {
        myValue: true
      },
      items: [
        {
          xtype: 'displayfield',
          fieldLabel: 'myValue',
          bind: {
            value: '{myValue}'
          }
        }
      ]
    });

    Ext.create('Ext.container.Container', {
      renderTo: Ext.getBody(),
      items: [
        {
          xtype: 'displayfield',
          fieldLabel: 'display',
          bind: {
            value: '{doSomething}'
          }
        },
        {
          xtype: 'myView',
          reference: 'view1',
          title: 'View1',
          bind: {
            myValue: '{value1}'
          }
        },
        {
          xtype: 'myView',
          reference: 'view2',
          title: 'View2',
          bind: {
            myValue: '{value2}'
          }
        }
      ],
      viewModel: {
        data: {
          value1: 'Something',
          value2: 'something else'
        }
      }
    })
  }
});

Answer 1

Your first displayField will never "see" the doSomething formula, because that formula is not part of it's parent, so you will need to move the formula from MyViewModel to your Ext.container.Container viewModel.

Also, when you publish a custom value, it will have reference.publishedvalue format. This should fix your panel:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.define('MyViewModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.myView'
        });

        Ext.define('MyView', {
            extend: 'Ext.panel.Panel',
            xtype: 'myView',
            viewModel: {
                type: 'myView'
            },
            config : {
                myValue : null
            },
            publishes : ['myValue'], 
            items: [{
                xtype: 'displayfield',
                fieldLabel: 'myValue',
                initComponent : function() {
                    var me = this,
                        owner = me.$initParent || me.initOwnerCt;

                    this.setBind({
                        value: '{' + owner.reference + '.myValue}'
                    });
                    this.callParent();
                }
            }]
        });

        Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            viewModel: {
                data: {
                    value1: 'Something',
                    value2: 'something else'
                },
                formulas: {
                    doSomething: function(getter) {
                        console.log(getter('value1'), getter('value2'));
                        return getter('value1') + getter('value2');
                    }
                }
            },
            items: [{
                xtype: 'displayfield',
                fieldLabel: 'display',
                bind: {
                    value: '{doSomething}'
                }
            },{
                xtype: 'myView',
                reference: 'view1',
                title: 'View1',
                bind: {
                    myValue: '{value1}'
                }
            },{
                xtype: 'myView',
                reference: 'view2',
                title: 'View2',
                bind: {
                    myValue: '{value2}'
                }
            }]
        })
    }
});