Extjs 5: create data binding for component custom property

Question

I have a component that is extended from a file field, and I added a custom serverPath property to it, and I also defined 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 insert the definition of myViewModel. it's 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 have to be tuned, because ExtJS will create a setter and getter for you, as well as an installer. In your view model, make sure you have:

 data: { serverPath : 'yourPathGoesHere' } 

Edited There are two things that were missing:

• When the value in the ViewModel changes, the scheduler publishes the changes asynchronously. If you want the changes to be reflected immeasurably, you need to use a notification in the ViewModel or slightly reduce the logic after the change.
• In order to get custom properties of class properties in order to notify ViewModel of changes, you need to add them to the "publishes" config property. Check out this updated script .