How to disable the widget in a widgetcolumn of a grid based on the attribute of a record in Sencha ExtJS v6?

Question

More or less the configuration looks like this:

{
            xtype: 'widgetcolumn',
            //text: "",    //localize

            dataIndex: "carStatusButton",

            //disable action for the column
            sortable: false,
            filter: false,
            menuDisabled: true,

            widget: {
                xtype: 'changeavailbutton',

                //reference: "gridCarStatusButton",  we cannot use reference because we get a duplicate reference warning

                //text is being automatically generated from dataIndex of widgetcolumn

                /*
                 //didn't work!
                defaultBindProperty: "curCarStatus",  //default is text

                curCarStatus: "aaaaaaaa",

                setCurCarStatus: function (value) {
                    this.curCarStatus = value;
                },*/

                /*
                 getCurCarStatus: function () {
                 return "aaaaaa"
                 },
                 setCurCarStatus: function (value) {
                 },*/

                /*text: (function() {
                 return this.enableToggle;
                 })(),

                 bind: {

                 },*/
            },
        }

• We have considered using the updater(cell, value, record, view) but it does not get called initially
• We have considered using the renderer(value, metadata, record) but we can only affect the value, it does not give us any help with the widget

• We considered to use a custom defaultBindProperty in the widget like this:

               defaultBindProperty: "curCarStatus",  //default is text
  
               curCarStatus: "",
  
               setCurCarStatus: function (value) {
                   this.curCarStatus = value;
               }
  

The above helped to avoid creating an extra field in the model that would be necessary. In other words initially we had a field in the model, as a transient field to get the calculated value inside the dataIndex of the widgetcolumn but didn't bring any help on what we were trying to achieve.

The fact is that (from documentation) widgetcolumn binds the dataIndex to the defaultBindProperty of the widget. One problem is that there is a bind that happens in the background that we are not aware of its key value. It would look like that if it was a configuration:

bind: {
   text: "{unknownProperty}"
}

If we knew how the property was called it could be helpful to use it in various properties because in our situation we need to bind more than one properties to the widget.

We are actually looking similar functionality provided by isDisabled provides to an ActionColumn to have it in a WidgetColumn.

Answer 1

In the widgetcolumn itself:

onWidgetAttach: function (column, widget) {
        if (widget.getWidgetRecord().get('property')) {
            widget.setDisabled(false)
        } else {
            widget.setDisabled(true)
        }
    }

And the grid can be updated with grid.getView().refresh() to reflect any changes