title: How to disable the widget in a widgetcolumn of a grid based on the attribute of a record in Sencha ExtJS v6?
body: <p>More or less the configuration looks like this:</p>
  
  <pre><code>{
              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: {
  
                   },*/
              },
          }
  </code></pre>
  
  <ul>
  <li>We have considered using the <code>updater(cell, value, record, view)</code> but it does not get called initially</li>
  <li>We have considered using the <code>renderer(value, metadata, record)</code> but we can only affect the value, it does not give us any help with the widget</li>
  <li><p>We considered to use a custom <code>defaultBindProperty</code> in the widget like this:</p>
  
  <pre><code>             defaultBindProperty: "curCarStatus",  //default is text
  
               curCarStatus: "",
  
               setCurCarStatus: function (value) {
                   this.curCarStatus = value;
               }
  </code></pre></li>
  </ul>
  
  <p>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 <code>dataIndex</code> of the <code>widgetcolumn</code> but didn't bring any help on what we were trying to achieve.</p>
  
  <p>The fact is that (from documentation) <code>widgetcolumn</code> binds the <code>dataIndex</code> to the <code>defaultBindProperty</code> of the <code>widget</code>. 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: </p>
  
  <pre><code>bind: {
     text: "{unknownProperty}"
  }
  </code></pre>
  
  <p>If we knew how the property was called it could be helpful to use it in various properties because in our situation <strong>we need to bind more than one properties to the widget</strong>.</p>
  
  <p>We are actually looking similar functionality provided by <code>isDisabled</code> provides to an <code>ActionColumn</code> to have it in a <code>WidgetColumn</code>.</p>