ExtJs – Bindable allowBlank

ExtJs does have a attribute for required by the allowBlank configuration against fields.

However, this configuration doesn’t have a setAllowBlank or a getAllowBlank method, because of which, it is not possible to bind those fields via the viewModel. So, usually, those fields have to be somehow fetched in the Controller and then that attribute.

This situation can however be remedied very easily.

To do this, we have to create an override. If only textField and it’s kin are to be bound (e.g. combos), then only Ext.form.field.Text can be overridden. However, a better solution is to override Ext.form.field.Base. This makes all fields bindable, which is huge convenience.

Ext.define('App.overrides.form.field.Text', {
	override: 'Ext.form.field.Base'
	// override: 'Ext.form.field.Text'

	, config: {  // getter/setter/apply/update
		allowBlank: true
	}
});

Now, we can have form which can have checkbox, and based on the selection the corresponding fields can be made mandatory.

Ext.define('App.view.Main', {
	extend: 'Ext.form.Panel'
	
	, viewModel: {
		data: {
			choice: null
		}
	}

	, title: 'Bindable allowBlank'
	, titleAlign: 'center'

	, bodyPadding: '20 50'

	, defaults: { labelWidth: 200 }

	, items: [{
		xtype: 'radiogroup'
		, reference: 'radiogroup'
		, fieldLabel: 'Set allowBlank on the field below'
		, bind: {
			value: '{choice}'
		}
		, defaults: {
			margin: '0 10'
			, width: 120
		}
		, items: [{
			boxLabel: 'Not Mandatory'
			, name: 'allow'
			, inputValue: false
		}, {
			boxLabel: 'Mandatory'
			, name: 'allow'
			, inputValue: true
		}]
	}, {
		xtype: 'displayfield'
		, fieldLabel: 'Choice'
		, bind: {
			value: '{choice.allow}'
		}
	}, {
		xtype: 'textfield'
		, margin: '20 0'
		, fieldLabel: 'Test Field'
		, msgTarget: 'side'
		, bind: {
			allowBlank: '{!choice.allow}'
		}
	}, {
		xtype: 'button'
		, text: 'Validate'
		, handler: 'onValidate'
		, handler: function () {
			var isValid = this.up('form').isValid()
				, title, msg, icon
				;
			if (isValid) {
				title = 'Success';
				msg = 'Form is Valid';
				icon = Ext.MessageBox.INFO;
			}
			else {
				title = 'Error';
				msg = 'Form is not valid';
				icon = Ext.MessageBox.ERROR;
			}

			Ext.Msg.show({
				title: title
				, message: msg
				, width: 300
				, buttons: Ext.Msg.OK
				, icon: icon
			});
		}
	}]

});