javascript - ExtJS 5 : Set child View Model data from bound value

Question

我有一个类有自己的 View 模型，我在主视图中创建了这个类的两个实例。在主视图中，我想传递我的 2 个类实例的值，但我似乎无法正常工作...我想我只是不理解一些非常简单的概念。

预期结果是 value1 + value2 字段由 value1 和 value2 拼接而成，第一个 myValue 显示 value1，第二个 myValue 显示 value2。这是我的代码和 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

您的第一个 displayField 永远不会“看到”doSomething 公式，因为该公式不是其父级的一部分，因此您需要将公式从 MyViewModel 移动到您的 Ext.container .容器 View 模型。

此外，当您发布自定义值时，它将具有 reference.publishedvalue 格式。这应该可以修复您的面板:

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