Button status is bound to form status, but disabled form is leaving button active

Question

I have a form (with a file field) that, once the form is validated (ie: a file has been selected for the file field) the [Upload] button is supposed to be active.

The PHP function returns a string ['true', 'false'] and works all over the place. That isn't the source of the bug. Guaranteed.

The problem is that when setting the form to disabled: true, the button that is looking to the file field (formBind: true) is interpreting the disabled field.File as passing the form requirements.

A possible solution would be to only disable the "browse" button that's part of the field.File, but I don't know how to do that.

The entirety of the function causing issues is below:

update_inventory_form_panel = new Ext.form.Panel({
  title: 'Update Inventory',
  bodyStyle: 'padding: 5px;',
  region: 'north',
  items: [
    new Ext.form.field.Display({
      value: 'Choose a CSV to upload.'
    }),
    new Ext.form.field.File({
      fieldLabel: 'Inventory File',
      name: 'update_csv',
      inputWidth: 400,
      allowBlank: false,
      disabled: <?= php_function_that_returns_'true'_or_'false'();?>
    })
  ],
  buttons: [
    new Ext.Button({
      text: 'Upload',
      formBind: true,
      handler: update_handler
    })
  ]
});

Answer 1

The problem is that when setting the form to disabled: true

From the above code, it looks like you are disabling 'Ext.form.field.File' and not 'Ext.form.Panel'.

The upload button is active because when 'Ext.form.field.File' is disabled, form won't consider file field for validation. (If field.File is not disabled and left empty, the upload button will be disabled)