How to bind my own object configs in Ext.js?

Question

I created a custom object that extend of 'Ext.form.field.Base' and I set some custom object configs that will control the visibility of its child components. But, because it's my own configs it will not be bindable.

This custom object has a child, a input file called 'fileedit' and fileedit child components are buttons (send file, delete file, download). I'm trying to control the visibility of these buttons using the viewModel. I cannot directly bind the visibility, I have to do it by custom object configs. It's hard to explain this structure without show the code and I can't send it because it's already in production environment.

My doubt is: Is there any way to make a custom config bindable?

   {
       xtype: 'fileedit',
       bind: {
           canDownload: '{canDownload}',
           canShowFileName: '{canShowFileName}',
           canClearImg: '{canClearImg}',
           canSendFile: '{canSendFile}', 
       },
       height: 180,
       listeners: {
           onFileChange: 'onFileChange',
           onAfterUploadFile: 'onAfterUploadFile'
       }
   }

Answer 1

You can use the twoWayBindable config in your custom component.

like this;

config: {
    canDownload: null,
    canShowFileName: null,
    ...
},
twoWayBindable: ['canDownload', 'canShowFileName', ...],

Check your component's documentation for the twoWayBindable config.