ExtJs Two-way binding between parent and child components

Question

I have two components: a panel and a custom text box.
The panel has a viewmodel, and I want to bind a value (called testData) from this view model to a property (called test) of a custom text field.
This works great ... basically.
But when the property of the testtext field changes, testDatain the view mode the panels are not updated accordingly. I mean, when the property of the testchild element (text field) is modified, the property of testDatathe model viewview panel should contain the same value as in test, as usual two-way binding.

I'm not sure what I'm doing wrong, but here is what I tried far: https://fiddle.sencha.com/#fiddle/20pu&view/editor

Ext.define('MyMain', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.main',

    width: '100%',
    bodyPadding: 10,

    viewModel: {
        data: {
            testData: 'Example Data'
        }
    },

    bind: {
        title: '{testData}'
    },

    items: {
        xtype: 'myField',
        bind: {
            test: '{testData}'
        }
    }
})

Ext.define('MyField', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.myField',
    fieldLabel: 'Data',
    width: '100%',

    config: {
        test: null // when test is changed, it should also affect the {testData} bind of the main component, causing the title to change
    },

    setTest(value) {
        this.test = value + ' modified!' // because of the bind, this /should/ automatically get appied to the viewmodel `testData` and thus to the panel title
        this.setValue(this.test) // whenever the `test` property is changed, we write the contents to the value of the text field (just to visualize the `test` property).
        // But as you can see, the panel title will still just say `Example Data` and not `Example Data modified!` as it should.
    },
    getTest(){
        return this.test
    }
})

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.container.Viewport', {
            items: [{
                xtype: 'main'
            }]
        })
    }
})

Answer 1

Update : (after reading your comments on other answers)

As a rule, mentioning a property in a block configand including it in publisheswill make any property a two-way binder.

ExtJS will generate getter and setter methods for it. The setter method takes care of binding. Now, whenever someone updates a property value (using setter), the new value will be passed to the associated viewModel and, in turn, to other components.

, this.test this.viewModel.data.testData , .

setter (setTest) , , this.callParent(...).

value test . fiddle test MyField.

" ", " " ( viewModel).

Set testData viewModel. " ", , test .

" " test, .

---

.

setTest this.test value + ' modified!'. testData viewModel, getter setter, , config.

Answer 2

Textfield, value, .

 bind: {
            test: '{testData}',
            value : '{testData}'
        },

, change test.

listeners : {
                change : function(field, newValue, oldValue, eOpts ){
                    field.setTest(newValue);
                }
            }

, fiddle.

Answer 3

-, test twoWayBindable.

, .

-, config , .

, .

, , , .

, , , : "applyFoo" "updateFoo" "foo", config, set, .

twoWayBindable , , , .

, . "", "".

, , , :

• setTest getTest.

• twoWayBindable, test.

  twoWayBindable: ['test']`
  

• applyTest updateTest. , .

  updateTest(testValue) {
      this.setValue(testValue)
  }
  

: https://fiddle.sencha.com/#fiddle/20rs&view/editor

Answer 4

• , , twoWayBindable .
• , , . update<Fieldname>(). , .
• 2.): , , .

: https://fiddle.sencha.com/#fiddle/218m&view/editor

:

• 3 TestData ViewModel
• 6 setTest()
• 9 setValue()
• ,

.