ExtJS 5: bind to other class properties, like allowBlank

Question

I'm getting confused on what config values are allowed to be bound, and which ones are not. Currently, allowBlank is not allowed to be bound, as I get an error saying Ext.mixin.Bindable.applyBind(): Cannot bind allowBlank on Ext.form.field.ComboBox - missing a setAllowBlank method. If I use a config, I don't get the error, but it doesn't work as expected:

xtype: 'combobox',
anchor: '100%',
fieldLabel: 'Affiliation',
name: 'AffiliationId',
displayField: 'Abbreviation',
valueField: 'AffiliationId',
queryMode: 'local',
typeAhead: true,
config: {
  forceSelection: true,
  allowBlank: false
},
bind: {
  store: '{affiliationStore}',
  allowBlank: '{allowBlankAffiliation}',
  forceSelection: '{forceSelectionAffiliation}'
}

What I'd like to know is, how can I bind allowBlank or any other property to a formula? Is this even possible, or am I totally not understanding something? And if so, how do I know what I can bind and what I can't bind?

Answer 1

Only properties with a setter, a set method should be present in the docs, can be bound. 'setAllowBlank' doesn't exist. allowBlank doesn't have a setter out of the box, because it is not placed within the config of the combobox object. As you can see in the source:

http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/source/Text.html#Ext-form-field-Text-cfg-allowBlank

By setting a allowBlank into a config like you did you are only suppressing the error.

What you can do is extend the ComboBox and create a custom config property. After that you can override the update method (created by the config system) and set allowBlank manually.

Ext.define('MyComboBox', {
    extend: 'Ext.form.field.ComboBox',

    alias: 'widget.MyComboBox',

    config: {
        requireMe: false
    },

    // override of generated update method
    updateRequireMe: function(value) {
        this.allowBlank = !value;
    }
});

Usage:

xtype: 'MyComboBox',
valueField: '_id',
displayField: 'name',
queryMode: 'local',
requireMe: '{!allowBlank}',
bind: {
    store: '{people}'
}

Answer 2

Sencha isn't always good at distinguishing between configuration variables and property variables. You sometimes need to go to the source.

Configuration variables are defined inside a config block. These are the variables that will have getters & setters generated, and that you can bind to. Properties, by contrast, are directly defined in the body of the class.

As you may have guessed, allowBlank - defined in the Ext.form.field.Text class - is directly defined, and thus is a property, even that it has a @cfg documentation marker. As such, it's not directly bindable.

You can make it bindable, though - you simply need to define the right methods. The easiest way to do this would be to create a subclass of Combobox, and add a section like this:

config: { allowBlank: true }

and then use that subclass in your form. Note, however, that this may not be sufficient; because the class isn't expecting allowBlank to change, it's not wired up to deal with (e.g. changing validators and so forth)

Answer 3

You can bind to any property where there is a corresponding "set" method. For example, there is a setStore() method, so you can bind to "store". Since there is no setAllowBlank(), you cannot bind to it.