extjs 5 : make a data binding for component's custom property

Question

i have a component that extended from the filefield, and i added a custom property 'serverPath' to it ,and also i have defined the getter and setter .

code :

Ext.define('MyApp.ux.Field.File',{
    extend:'Ext.form.field.File',
    xtype:'myfilefield',
    serverPath:'',
    getServerPath:function(){
    return this.serverPath;
},
setServerPath:function(serverPath){
    this.serverPath = serverPath;
}
});

Ext.create('MyApp.ux.Field.File',{
    bind:{
        serverPath:'{serverPath}'
    },
    viewModel:{
        type:'myViewModel'
    }
});

i will not paste the myViewModel's definition . it is simple.

and it turned out that the binding does not take effect.

can anyone help ?

Answer 1

Your class should be:

Ext.define('MyApp.ux.Field.File',{
  extend:'Ext.form.field.File',
  xtype:'myfilefield',
  config: {
    serverPath:''
  }   
});

And you should be all set because ExtJS will create the setter and getter for you as well as the setter. In your view model make sure you have a:

data: {
   serverPath : 'yourPathGoesHere'
}

Edited There are two things that were missing:

1. When a value on the ViewModel changes the changes are asynchronously published by the scheduler. If you want the changes reflected immidiatly you need to use notify on the ViewModel or deffer the logic after the change a bit.
2. To get custom config properties of a class to notify back the ViewModel of changes you need to add them in the 'publishes' config property. Please see this updated fiddle.