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: 'bobox',
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?

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: 'bobox',
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?

• javascript
• extjs
• mvvm
• data-binding
• extjs5

• See also sencha./forum/… with override option. – Vadzim Commented Jul 29, 2019 at 18:11

4 Answers 4

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 bobox object. As you can see in the source:

http://docs.sencha./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}'
}

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)

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.

Thread https://www.sencha./forum/showthread.php?339465-Why-allowBlank-isn-t-bindable suggested that it's possible to override base field class instead of extending it.

So in my case with extjs 5.1.1.1 the solution is as simple as:

Ext.define('AdminKit.form.field.override.Text', {
    override: 'Ext.form.field.Text',

    setAllowBlank: function(value) {
        this.allowBlank = value;
        this.validate();
    }
}