ExtJS 5: binding to other class properties like allowBlank
I am confused about which config values can be linked and which cannot. Currently allowBlank cannot be bound because I am getting an error Ext.mixin.Bindable.applyBind(): Cannot bind allowBlank on Ext.form.field.ComboBox - missing a setAllowBlank method.
If I use config I don’t get an 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}'
}
I would like to know how can I bind allowBlank
or any other property to the formula? Is this possible, or am I completely at a loss? And if so, how can I know what I can link and what I cannot link?
source to share
Only properties with a setter, setter must be present in docs , can be bound. 'setAllowBlank' does not exist. allowBlank
doesn't have an out-of-the-box installer because it's not in the combo box object config. 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 allowBlank
in the configuration as you did, you only suppress the error.
What you can do is extend the ComboBox and create your own config property. After that, you can override the update method (generated by the config system) and install 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;
}
});
Using:
xtype: 'MyComboBox',
valueField: '_id',
displayField: 'name',
queryMode: 'local',
requireMe: '{!allowBlank}',
bind: {
store: '{people}'
}
source to share
Sencha is not always well versed in config variables and property variables. You sometimes need to go to the source .
Configuration variables are defined inside the block config
. These are the variables in which getters and setters will be generated and which you can bind. Properties, on the other hand, are directly defined in the body of the class.
As you might have guessed, allowBlank
- defined in a class Ext.form.field.Text
- is directly defined and therefore is a property, even if it has a documentation token @cfg
. As such, it cannot communicate directly.
You can make it bindable though - you just need to define the correct methods. The easiest way to do this is to subclass Combobox and add a section like this:
config: { allowBlank: true }
and then use this subclass in your form. Note, however, that this may not be enough; because the class is not expecting a change allowBlank
, it is not hooked up to work (like changing validators, etc.)
source to share
The thread https://www.sencha.com/forum/showthread.php?339465-Why-allowBlank-isn-t-bindable suggested that it is possible to override the base class of the field 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();
}
}
source to share