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

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

• javascript
• extjs
• mvvm
• extjs5

Share Improve this question Follow asked Aug 28, 2015 at 22:46 incutonezincutonez 3,34199 gold badges5252 silver badges104104 bronze badges 4

• Why do you think that your Ext.container.Container instance will use MyViewModel? Specify type: 'myView' in its viewModel config and see the difference. Similarly, how can you expect myView bindings to use data from the parent's viewmodel if they have their own one? – Greendrake Commented Aug 29, 2015 at 4:28
• I actually don't expect my container to use MyViewModel... I did, however, specify its own local viewModel with my two data values. I was hoping that I could somehow hand down a parent's bound data to the children, but I guess that's not possible? – incutonez Commented Aug 29, 2015 at 5:08
• That's all possible, but that will make your design more tightly coupled. The "best practice" solution will depend on your actual goal. For example, maybe there is no need for myView instances to have their own viewmodels and they can use the parent's one? – Greendrake Commented Aug 29, 2015 at 5:58
• Well that's the thing, I want to be using this class in other views, so I basically want to prevent copy and pasting code all over the place. I was just hoping I could feed it a parent's bound variable... guess I was totally wrong. – incutonez Commented Aug 29, 2015 at 6:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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}'
                }
            }]
        })
    }
});